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);

이제 isActive 값은 함수형 컴포넌트에서 state로 사용이 가능합니다. 또한 setActive()를 사용하여 isActive의 값을 업데이트 할 수 있죠. 맨 처음 useState()를 사용하여 선언할 때 초기값을 설정할 수 있으며 위에서는 false를 사용하였습니다. 즉 초기값은 false가 저장되었습니다.

다음으로 버튼 요소를 추가하였으며 클릭할 경우 setActive() 함수를 호출하며 상태값이 업데이트 됩니다. 이때 업데이트 값은 !isActive로 현재 isActive의 반대값이 새롭게 선언됩니다. 즉 토글과 같이 동작합니다.
<button onClick={ () => setActive( !isActive ) }>Toggle</button>


! state hook의 값을 선언할 때 함수를 사용하는 방법
state hook을 사용하는 다른 코드들을 살펴보면 값을 업데이트 할 경우 인자에 함수를 전달하는 경우가 있습니다. 예를들어 아래의 두 번째 예제와 같이 사용되기도 합니다.
setNumber(100); // 100으로 새롭게 선언된 경우

setNumber(prev => prev + 100); // 함수를 사용하여 선언한 경우

그렇다면 함수를 사용하는 경우 무엇이 다를까요? 함수를 사용하게 되면 첫 번째 인자로 prev와 같이 이 전에 저장된 값을 전달받을 수 있습니다. 즉 새로운 값을 저장할 때 이전에 저장된 값도 필요한 경우 함수를 사용하면 더 간단하게 코드 구현이 가능합니다. 자주 사용되므로 알아두시면 좋습니다.

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