오늘은 지난 리액트 포스팅에서 useState의 연장선으로 간략하게 State Hook 에 대해서 알아보겠습니다.

🎯 State Hook이란?

State Hook은 React 16.8에서 도입된 기능입니다.
함수형 컴포넌트에서 상태를 관리할 수 있으며, 클래스형 컴포넌트에서 상태를 관리하는 것과 동일한 방식으로 상태를 관리할 수 있습니다.

State Hook을 사용하려면 useState를 사용해야합니다. useState에 대한 설명이 잘 기억이 안나신다면 지난번 글인 useState에 대한 설명과 예시에 대한 포스팅을 먼저 읽어주세요. 그래도 일단 간단하게 설명해보겠습니다. useState는 두 개의 값을 반환하는데, 첫 번째 값은 상태의 현재 값을 말하고 두 번째 값은 상태를 업데이트하는 함수를 말합니다.

이제 이해를 좀 더 돋기 위해 count 상태를 관리하는 함수형 컴포넌트에 관한 예시를 보여드리겠습니다.

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

위 예시는 count 상태를 0으로 초기화하고, +1 버튼을 클릭하면 count 상태를 1 증가시키는 기능을 구구현한 코드입니다.
천천히 보면서 State Hook의 주요 특징에 대해서 정리해보도록 하겠습니다.

📍 State Hook의 주요 특징

1. useState 사용

앞에서 말했던 것처럼 useState를 사용합니다. 여기서 useState 상태 변수를 생성하고, 해당 상태를 업데이트 해줍니다.

2. 값 초기화

useState는 인자로 초기 상태 값을 전달합니다. 위 코드에서는 count를 말합니다. 이 값은 컴포넌트가 처음 렌더링될때만 사용이 됩니다.

3. 상태 업데이트

useState가 반환하는 상태 업데이트 함수를 사용하여 상태를 업데이트합니다. 여기서는 setCount를 말합니다. 이전 상태 값을 받아서 새로운 상태 값을 반환하는 것을 볼 수 있습니다.

이렇게 State Hook의 주요 특징에 대해 알아보았습니다.

정리하자면 State Hook은 함수형 컴포넌트에서도 상태를 쉽게 관리할 수 있으며, 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다. 함수형 컴포넌트를 주로 사용하는 React 개발자들에게는 매우 유용한 기능이라고도 볼 수 있겠죠. 하지만 좀 더 복잡한 상태 관리를 위해서는 useReducer나 useContext와 같은 다른 Hook들도 함께 사용할 수 있다는 사실도 기억해야 합니다.

이것으로 오늘의 포스팅을 마치겠습니다.