React에서 state hook을 사용하는 방법에 대하여 알아봅니다.



# React state hook 알아보기
react 16.8 이 후 부터 사용 가능한 react hook은 class형 컴포넌트가 아닌 경우에도 state를 사용한 상태 관리를 쉽게 사용할 수 있게 도와주는 강력한 기능입니다. 만약 클래스가 아닌 함수형 컴포넌트의 경우 stateless한 컴포넌트이지만 훅을 사용하여 state를 생성하고 사용 가능합니다. 간단한 사용 방법은 아래와 같습니다.

const [myValue, setValue] = useState(초기값);

더 자세한 내용은 아래에서 알아봅니다.



! state hook 사용하는 방법
어떻게 state hook을 사용하는지 알아봅니다. 사용 방법은 아주 간단하며 useState()를 사용해 선언합니다. 이때 배열을 사용하며 첫 번째는 state가 저장될 이름을 두 번째는 값을 업데이트 할 메소드가 위치하게 됩니다.
const [ isActive, setActive ] = useState(false);

위 코드는 isActive와 setActive()를 state hook으로 사용한 코드입니다. 클래스에서 setState()를 사용하는 것과 거의 비슷합니다. 다만 선언할 때 하나가 아닌 두 개의 값을 사용하는 것이 차이점입니다. 이제 isActive를 state로 사용하고 불러올 수 있습니다. 또한 값을 변경, 업데이트 하기 위해서는 setAcitve('변경할 값')를 사용할 수 있습니다.


! state hook 예제 보기
아래에서 간단한 예제를 만들어 알아봅니다. state hook을 함수형 컴포넌트에 사용하고 버튼을 누르면 state 값을 변경합니다. 이때 ChildComponent를 보여주거나 사라지도록 만드는 간단한 예제를 구현하려고 합니다.
import React, { useState } from 'react;
import ChildComponent from './child-component';

extends default () => {
  const [ isActive, setActive ] = useState(false);

  return () => {
    render() {
      <button onClick={ () => setActive( !isActive ) }>Toggle</button>
      { isActive && <ChildComponent /> }
    }
  };
});

예제는 모두 완성되었습니다. 보시는 것 처럼 this를 사용하지 않고 값만 넘기면 되므로 더 간단하게 state를 사용할 수 있습니다. 그럼 순대로 하나씩 알아보겠습니다.


! react state hook 예제 설명
먼저 useState를 사용하기 위해서 react에 import를 사용하여 선언하였습니다..
import React, { useState } from 'react;

다음으로 가장 주요한 부분입니다. const를 사용하여 아래와 같이 값을 가져올 변수와 업데이트 할 변수를 getter, setter처럼 나란히 선언합니다.
const [ isActive, setActive ] = useState(false);

useState()에는 초기값으로 false를 사용하였습니다.

이번에는 버튼 요소를 추가합니다. 클릭할 경우 setActive 함수를 호출하며 상태값이 업데이트 됩니다.
<button onClick={ () => setActive( !isActive ) }>Toggle</button>

여기까지 state hook 예제의 모든 과정을 알아봤습니다.