[리액트/React] 화면 변경하기(State)

[리액트/React] 화면 변경하기(State)

지난 포스트에는 이벤트 리스너에 대해 간단히 알아보았습니다.

 

버튼 클릭 시 변수의 값을 바꾸는 것만으로는 화면에 보이는 버튼 내용을 변경하지 못했습니다.

리액트에서는 let, var와 같은 일반 변수들이 변경되더라도 일반적으로 컴포넌트를 다시 그리지 않습니다.

 

State

 화면을 다시 그리기 위해서는 state라는 특수한 변수를 사용하여야 합니다. 등록된 state 함수가 미리 설정된 함수에 의해 변경될 경우 컴포넌트를 재호출하며 화면을 다시 그립니다.

 

 state를 관리하기 위해 아래와 같이 리액트 라이브러리로 부터 useState란 함수를 import 해야합니다. 아래 코드는 React 라이브러리로부터 useState 함수를 import하는 코드입니다.

import React, { useState } from 'react';

 

state는 일반 자바스크립트 객체입니다. props는 매개변수와 같이 컴포넌트에 전달되지만 state는 컴포넌트 안에서 관리되는 차이가 존재합니다. props와 state의 차이에 대해 더 자세히 알고 싶다면 아래 두 링크를 참고해보세요.

https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

GitHub - uberVU/react-guide: React adventures

https://lucybain.com/blog/2016/react-state-vs-pros/

Lucy Bain

 

useState 함수

useState 함수는 컴포넌트 함수가 초기 값을 넘겨주면 state 변수를 생성하고 생성한 변수를 변경할 수 있는 함수를 등록합니다.

 

useState는 컴포넌트 내부에서 호출되어야만 합니다.

 

useState는 매개변수로 초기값을 전달받으며 반환값으로 state 변수와 이를 변경할 수 있는 함수를 가지는 배열을 반환합니다.

const [buttonContent, setButtonContent] = useState('버튼');

 

위 코드를 활용하여 버튼 클릭 시 버튼의 내용을 변경하는 코드를 작성해보고 실행해 보도록 합시다.

const CustomComponent = (props) => {
	const [buttonContent, setButtonContent] = useState('버튼');
  const clickHandler = (props) => {
    buttonContent = '클릭됨';
    console.log(buttonContent);
  };

	return (
		<button onClick={clickHandler}> {buttonContent} </button>
	);
}

 

 예상과 달리 버튼을 클릭하더라도 내용이 그대로인 것을 확인할 수 있습니다. 이는 useState를 통해 반환받은 값 변경 함수를 사용하지 않아서 발생한 문제입니다.

 

 setButtonContent 함수를 사용하도록 코드를 수정해보겠습니다.

const CustomComponent = (props) => {
  const [buttonContent, setButtonContent] = useState('버튼');
  const clickHandler = (props) => {
    setButtonContent('클릭됨');
    console.log(buttonContent);
  };

	return (
		<button onClick={clickHandler}> {buttonContent} </button>
	);
}

 

 이제 버튼의 내용이 정상적으로 변경된 것을 확인할 수 있습니다.

 

setState 함수를 사용해야 하는 이유

 setButtonContent 함수를 사용해야만 state 값을 변경하는 것과 더불어 부가적인 기능들 또한 수행되기 때문에 setState 함수를 사용하여 state를 변경하여야만 합니다.

 

setState 함수의 주의점

 setState 함수는 state를 바로 변경하는 것이 아니라 추후 변경합니다. 따라서 이를 바로 사용하지 않거나 특수한 방식을 사용하여야만 합니다.

 

 

참고

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

https://ko.reactjs.org/docs/faq-state.html

컴포넌트 State – React