useState 로 컴포넌트에서 바뀌는 값 관리하기

리액트 16.8 이전 버전은 함수형 컴포넌트에서는 상태를 관리할 수 없었다.

리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.

리액트의 Hooks 중 하나인 useState 함수는 상태(state: 동적인 값)를 관리한다.

 

이벤트 설정

리액트에서 이벤트를 설정해줄 때에는 on이벤트이름={실행하고싶은함수} 형태로 작성한다.

이 때 함수는 함수 실행 형태로 작성 시 렌더링 되는 시점에 함수가 호출되기 때문에 함수형태로 작성해야 한다.

 

Counter.js

import React from 'react';

function Counter() {
  const onIncrease = () => {
    console.log('+1')
  }
  const onDecrease = () => {
    console.log('-1')
  }

  return (
    <div>
      <h1>0</h1>
      <button onClick={(onIncrease())}>+1</button>  //함수 호출(실행) 형태 (X)
      <button onClick={onDecrease}>-1</button>      // 함수 형태 (O)
    </div>
  );
}

export default Counter;

렌더링 되는 시점에 함수가 호출되기 때문에 Counter.js 가 렌더링 되고 있는 페이지를 새로고침하면, 버튼을 누르는 이벤트가 입력되지 않아도 렌더링 되는 시점에 함수가 호출되므로 콘솔창에 +1 과 -1 이 찍히게 된다.

 

useState 선언 방식

const [number, setNumber] = useState(기본값);

useState를 사용해서 바뀌는 값을 관리할 수 있다.

useState를 사용할 때에는 상태의 기본값을 파라미터로 넣어서 호출한다.

useState 함수를 호출하면 배열이 반환되는데, 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수이다.

배열 비구조화 할당을 통하여 각 원소를 추출한다.

원리

// useState 호출 시 배열 반환
useState = [
	number,      // 첫번째 원소: 현재상태(useState.number)
	setNumber    // 두번째 원소: Setter 함수(useState.setNumber)
]


// 배열 비구조화 할당을 통해 각 원소 추출
const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

 Setter 함수는 파라미터로 전달받은 값을 최신 상태로 설정해준다.

 

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }
  const onDecrease = () => {
    setNumber(number - 1);
  }

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

위의 코드는 카운터를 만들 때 초기값을 0 으로 설정해준 것이다.

의미: 기본값이 0 인 number 라는 현재 상태를 만들어주었다. setNumber 는 useState 상태를 바꾸어주는 함수이다.

setNumber 함수에서 새로운 값을 넣어서 호출해주면 기존의 number 값을 참조해서 number 의 값이 바뀌게 된다.

 

함수형 업데이트

Setter 함수를 사용할 때 업데이트 하고 싶은 새로운 값을 파라미터로 넣어준다.

Setter 에 함수를 등록하는 방식으로 값을 업데이트 할 수도 있다.

함수형 업데이트는 주로 컴포넌트를 최적화할 때 사용한다.

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

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

기존의 setNumber 과 함수형 업데이트 setNumber 의 차이점 비교

function Counter() {
  const [number, setNumber] = useState(0);
           ↑ number 상태
  const onIncrease = () => {
    setNumber(number + 1);      // number 상태를 가져와서(참조해서) + 1 한 값을 넣겠다.
  }
}

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);  // 값을 어떻게 업데이트할 것인지 함수를 넣어줌 (업데이트 함수)
  }
}

지금 비교하는 식에서는 업데이트 함수와 크게 차이점이 없지만,

업데이트 함수는 리액트 컴포넌트 렌더링 함에 있어서 최적화와 관련이 있다는 점을 알아두자.

---

const [todo, setTodo] = useState({
    text: 'Hello',
    done: false
});

const onClick = useCallback(() => {
    setTodo(todo => ({
        ...todo,
        done: !todo.done
    }));
}, []);

원래 useCallback 함수에 위쪽의 todo 를 그대로 사용했다면 useCallback 에서 todo 의 상태에 의존하기 때문에 deps 에 todo 값을 넣어주어야 하지만, useState 를 통해 함수형 업데이트를 하게 되면 deps에 값을 넣어주지 않아도 되는 장점이 있다.