[React] 5. useState Hook을 통한 상태 관리

백괴·2021년 8월 20일

React 리액트

잘못 된 내용에 대한 지적은 언제든 환영입니다.

React에서의 상태 관리

컴포넌트에서 사용되는 동적인 값을 상태(state)라고 부른다. 이를 통해 동적인 웹앱을 만들 수 있다.
state 값을 업데이트 할 경우, 수정을 하는 것이 아니라 새로운 값을 할당해주어야 한다.
👉 이를 불변성을 지킨다라고 한다.
불변성을 지키는 이유 : 리액트는 상태 변경에 따라 리렌더링을 수행하는데, 현재 state와 바뀔 state의 값을 메모리 주소로 비교하기 때문이다.
👉 값을 수정만 할 경우 메모리 주소는 변함이 없기에, 새로운 값을 할당해야 한다.
함수형 컴포넌트에서는 useState라는 Hook을 통해 상태 관리를 할 수 있다.

Q. Hook이 대체 뭔가요🤔
A. 함수형 컴포넌트에서 사용되는 함수로, 이를 통해 생명 주기, 상태 관리 등의 React의 다양한 기능들을 사용할 수 있다.

`useState` 사용하기

useState 함수를 import해준다.

   import { useState } from "react";

   const [state, setState] = useState(initialState);

구성 요소
- state : 현재 상태
- setState : 새로운 state 값을 지정하는 settet 함수
- initialState : 초기 state 값

'이벤트 핸들링 + 상태 관리' 예제

JSX에서의 이벤트 핸들링에 대한 내용은 챕터 2를 참고 바란다.
예제 내용 : '+1'/'-1' 버튼을 눌러, 뷰에 표시되는 숫자(num)을 조절할 수 있는 웹앱

import { useState } from "react";

function Counter() {
  /* const numState = useState(0);
     const num = numState[0]; // 상태
     const setNum = numState[1]; // setter 함수
  위의 과정들을 '배열 비구조화 할당'문법을 통해 아래 한줄로 축약함 (챕터 3 참고) */
  const [num, setNum] = useState(0);

  const onIncrease = () => {
    setNum(num + 1);
  };

  const onDecrease = () => {
    setNum(num - 1);
  };

  return (
    <div>
      <h1>{num}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

함수형 업데이트

기존의 state 값이 함수의 파라미터로 자동으로 들어온다.
useCallback 함수 내부에 useState를 사용 할 경우 성능 최적화에 용이하다.
(useCallback에 대한 내용은 이후 챕터에서 알아 볼 예정이다.)

   const onIncrease = useCallback(() => {
     setNum((preNum) => preNum + 1);
   }, []);

   const onDecrease = useCallback(() => {
     setNum((preNum) => preNum - 1);
   }, []);