useState 훅의 효과적인 사용법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 기초부터 중급까지의 개발자, 특히 함수형 컴포넌트에서 상태 관리에 관심 있는 개발자

핵심 요약

• 불변성 유지 : useState로 상태를 업데이트할 때 ... 스프레드 연산자로 새로운 객체/배열 생성
• 함수형 업데이트 : setCount(prev => prev + 1)처럼 이전 상태에 의존하는 경우 반드시 함수형 업데이트 사용
• 성능 최적화 : useState로 생성된 참조는 React의 얕은 비교 전략을 통해 불필요한 리렌더링 방지

섹션별 세부 요약

1. React 상태 관리의 기본

• useState는 문자열, 배열, 객체, 숫자 등 모든 데이터 타입을 저장 가능
• useState(0)으로 초기값 설정, setCount로 상태 업데이트
• useState는 클래스 컴포넌트의 this.state 대체

2. 상태 업데이트 패턴

• 숫자 타입 : setCount(prev => prev + 1)
• 배열 타입 : setList(prev => [...prev, newItem])
• 객체 타입 : setObj(prev => ({ ...prev, name: 'Writer' }))

3. 불변성과 스프레드 연산자

• 원본 객체/배열을 직접 수정하지 않고 새로운 참조 생성
• arr.push(x) 후 [...arr]처럼 직접 수정 후 복사 시 원본 데이터 변조 가능성
• 스프레드 연산자로 중첩된 객체/배열은 여전히 참조 유지

4. 성능 고려사항

• useState로 생성된 참조는 React의 얕은 비교 전략 적용
• 참조 변경 시만 리렌더링, 성능 개선
• 스프레드 연산자 과도한 사용 시 가독성 저하 가능성

5. 주의사항

• 객체 병합 시 후순서 속성이 우선 적용
• 비동기 업데이트 시 함수형 업데이트 필수
• useState는 React 16.8 이상에서 사용 가능

결론

• 핵심 팁 : useState 사용 시 불변성 원칙과 스프레드 연산자, 함수형 업데이트를 반드시 적용
• 예시 : setCount(prev => prev + 1)은 이전 상태에 의존할 때 필수적
• 결론 : useState는 React 함수형 컴포넌트에서 상태 관리의 핵심 도구이며, 정확한 사용법을 통해 성능과 안정성을 동시에 확보 가능