React Hooks: useState, useEffect, useContext의 핵심 개념과 활용 방법

카테고리

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

서브카테고리

웹 개발

대상자

• *React 초보자 및 중급 개발자**
• 난이도: 기초 개념 설명 중심, 실무 적용 예시 포함*

핵심 요약

• useState는 상태 관리를 위한 핵심 훅으로, 함수형 컴포넌트에서 상태를 선언 및 업데이트 할 수 있음
• useEffect는 사이드 이펙트(예: API 호출, DOM 조작)를 처리하며, 의존성 배열로 렌더링 시점 제어 가능
• useContext는 Redux 대체로 전역 상태 관리를 간결하게 처리하며, Provider와 Consumer 패턴 활용

섹션별 세부 요약

1. useState: 상태 관리 기초

• 함수형 컴포넌트에서 상태를 선언하는 방법: const [state, setState] = useState(initialValue);
• 클래스 컴포넌트와의 차이: this.setState 대신 불변성 유지하는 방식 사용
• 예시: 카운터 상태 업데이트 시 setCount(prev => prev + 1) 사용

2. useEffect: 생명주기 관리

• 렌더링 후 실행되는 함수: useEffect(() => { ... }, [dependency])
• 의존성 배열에 포함된 값이 변경 시 다시 실행됨
• 정리 작업: return () => { cleanup }으로 컴포넌트 언마운트 시 리소스 해제

3. useContext: 전역 상태 공유

• Redux 대체로 전역 상태 관리: useContext(ThemeContext) 사용
• Provider로 값 전달, Consumer로 소비하는 방식
• 예시: 테마 상태를 전역에서 모든 컴포넌트에 전달 가능

결론

• useEffect 정리 함수 사용 필수 (메모리 누수 방지)
• 불필요한 의존성 배열 생략 (렌더링 성능 개선)
• useContext는 중복 props 전달을 줄이는 데 효과적 (단, 과도한 사용은 성능 저하 유발 주의)