Tech Blog
Tech Blog
DocsuseState 완벽 가이드
GitHub
React3분

useState 완벽 가이드

React useState 훅의 동작 원리와 최적화 패턴

2024년 1월 20일
reacthooksstate

useState 기본 사용법

useState는 React 함수 컴포넌트에서 상태를 관리하는 가장 기본적인 훅이다.

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

초기값 지연 계산

초기값 계산이 비용이 클 때는 함수를 전달한다.

TSX
// ❌ 매 렌더링마다 계산
const [data, setData] = useState(expensiveCalculation());
 
// ✅ 첫 렌더링에만 계산
const [data, setData] = useState(() => expensiveCalculation());

함수형 업데이트

이전 상태를 기반으로 업데이트할 때는 함수형 업데이트를 사용한다.

TSX
// ❌ 클로저 문제 발생 가능
setCount(count + 1);
 
// ✅ 항상 최신 상태 기반
setCount(prev => prev + 1);
Written by

Mirunamu (Park Geonwoo)

Software Developer

관련 글 더보기

React

Compound Components 패턴

여러 컴포넌트가 암묵적으로 상태를 공유하며 협력하는 설계 방식

읽기
React

Higher Order Component, 아직도 써야 할까

HOC가 왜 등장했고, Hook이 어떻게 대체했는지

읽기
다음 글Compound Components 패턴
목차
  • useState 기본 사용법
  • 초기값 지연 계산
  • 함수형 업데이트