React : useState

개요

리액트 훅 중 가장 많이 언급될만한 훅이다. useState는 함수 컴포넌트 내부에서 상태를 정의하고 이 상태를 관리할 수 있게 해줌.

useState 구현

useState 훅의 기본적인 사용법은 다음과 같다.

import { useState } from 'react';
const [state, setState] = useState(initialState);

• 초기값을 전달하지 않으면, state의 초깃값은 undefined
• 클로저를 사용하여, state는 useState, setState 함수의 실행이 종료된 이후에도 참조 가능

게으른 초기화

일반적으로 useState() 인수로 원시값 넣는데, 인수로 특정 값을 리턴하는 함수를 넘길 수 있어.
이걸 lazy initialization, 게으른 초기화라고 부른다.

// 일반적인 useState 사용
const [count, setCount] = useState(Number.parseInt(window.localStorage.getItem(cacheKey)));

// 게으른 초기화: 함수를 실행해 반환함
const [count, setCount] = useState(() => Number.parseInt(window.localStorage.getItem(cacheKey)));

리액트 공식 문서: lazy initialization에 따르면,

• useState 초깃값이 복잡하거나 무거운 연산을 포함할 경우에, 게으른 초기화 사용을 권장
• 처음 state가 만들어질때만 사용. 리렌더링시, 이 함수의 실행은 무시
• 리액트는 리렌더링마다 컴포넌트의 함수가 재실행됨. useState의 값도 재실행.
• useState 인수로 값 자체를 주면, 초기렌더링이나 리렌더링 모두 (초깃값이 있으나 없으나) 해당값에 접근해서 낭비 발생.
• 인수로 함수를 넘기면, 초기값이 없는 경우에는 함수 실행해서 무거운 연산. 이미 초깃값이 있으면, 함수 실행하지 않고 기존의 값을 사용.
• 무거운 연산 like localStorage, sessionStorage, 배열연산자에는 게으른 초기화!
  

setState에 콜백을 사용하는 이유

상태 갱신 함수에 콜백을 전달하는 것은 최신 상태 값을 기반으로 상태를 갱신하기 위함
지연된 상태 참조 방지에 도움

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

// 잘못된 예시 - 상태가 최신 상태가 아닐 수 있음
const incrementIncorrect = () => {
  setCount(count + 1);  // 이 시점의 `count` 값은 최신이 아닐 수 있음
  setCount(count + 1);  // 여전히 최신 상태가 아닐 수 있음
};

// 올바른 예시 - 콜백을 사용하여 최신 상태 값으로 갱신
const incrementCorrect = () => {
  setCount(prevCount => prevCount + 1); // 첫 번째 업데이트
  setCount(prevCount => prevCount + 1); // 두 번째 업데이트
};

• 콜백 함수는 가장 최근의 상태 값을 인수로 받음. 이를 통해 상태 갱신이 최신 상태를 기준으로 이루어짐.
• React는 성능을 위해 상태 업데이트를 비동기적으로 처리하고 배치함. 이 경우, 콜백을 사용하면 예기치 않은 동작을 방지할 수 있음.
• 각 상태 업데이트가 이전 업데이트 결과를 기반으로 수행되므로, 상태 갱신의 순차적 정확성을 보장