React Hook - useState

useState

Hook에서는 컴포넌트 안에서 상태를 관리할 수 있도록 하기 위해 useState 라는 API를 제공합니다.

useState는 상태 값과 상태를 업데이트할 수 있는 함수 쌍을 반환합니다.

예시 코드는 다음과 같습니다.

 

useState 예시

import React, {useState} from "react"

const HookUseState = (props) => {
  // count 라는 상태를 만들고, 0을 초기값으로 사용합니다.
  const [count, setCount] = useState(0);

  const handleButtonClick = () => {
    // 카운트 값을 1 증가하여 상태를 업데이트합니다.
    setCount(count + 1)
  };

  return (
    <div>
      <p>클릭 수: {count}</p>
      <button type="button" onClick={handleButtonClick}>클릭</button>
    </div>
  );
};

export default HookUseState;

예시에서 볼 수 있듯이 useState API를 통해 상태값과 업데이트 함수를 받고, 상태를 관리할 수 있습니다.

클래스형 컴포넌트의 setState와 다른 점은 hook의 state는 이전의 state와 합치지 않는 것입니다.

 

useState는 다음과 같이 함수를 인자로 전달하여 사용할 수도 있습니다.

 

useState 함수 예시

import React, {useState} from "react"

const HookUseState = (props) => {
  // count 라는 상태를 만들고, 0을 초기값으로 사용합니다.
  const [count, setCount] = useState(() => {
    // do something
    return 0; // 초기값 반환
  });

  const handleButtonClick = () => {
    // 기존 상태값에 1을 증가하여 상태를 업데이트합니다.
    setCount(prevState => prevState + 1)
  };

  return (
    <div>
      <p>클릭 수: {count}</p>
      <button type="button" onClick={handleButtonClick}>클릭</button>
    </div>
  );
};

export default HookUseState;

 

useState는 setState와 달리 state가 업데이트된 이후에 callback 함수를 실행하도록 할 수 없습니다.

References

• https://ko.reactjs.org/docs/hooks-overview.html
• https://ko.reactjs.org/docs/hooks-state.html
• https://ko.reactjs.org/docs/hooks-reference.html