Next.js에서 Context API와 Hooks를 활용한 데이터 공유 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- React 및 Next.js 초보 개발자
- REST API와 상태 관리 패턴을 학습하고자 하는 개발자
- 타입스크립트 기반 유형 안전을 적용하고자 하는 프로젝트
- 난이도: 중간 (React 기초 지식 필요)
핵심 요약
useContext()
와useEffect()
를 활용해 REST API 데이터를 전역 상태로 관리createContext()
로 전역 Context 생성 후Provider
로 데이터 공유- 타입스크립트
User
인터페이스와UserContextType
을 통해 유형 안전 보장
섹션별 세부 요약
1. Prop Drilling 문제점
- * 중첩된 컴포넌트 간 데이터 전달 시 불필요한 중간 컴포넌트 경로 생성
- * 코드 유지보수성 저하 및 버그 발생 가능성 증가
- * 여러 컴포넌트에서 동일 데이터 사용 시 컴포넌트 트리 재구성 필요
2. Context API + Hooks 솔루션
- *
useState
로 사용자 데이터 저장,useEffect
로 REST API 호출 - *
createContext()
로 전역UserContext
생성 후Provider
로 데이터 공유 - *
useContext()
로 컴포넌트 내에서 전역 상태 접근
3. 코드 구조 예시
- *
UserContext.js
에서User
인터페이스 정의 - *
app/providers.tsx
에서UserContext.Provider
로 데이터 전달 - *
components/UserProfile.tsx
에서useContext()
로 데이터 사용
4. 실행 흐름
- * 앱 로드 시 REST API 호출 후 데이터 저장
- * 전역
UserContext
에 데이터 저장 - *
UserProfile
컴포넌트에서useContext()
로 데이터 읽기
결론
- REST API 데이터를 전역 상태로 관리해 prop drilling 방지
- 타입스크립트 기반 유형 안전을 적용해 확장성 높은 아키텍처 구축
useContext()
와useEffect()
활용 시 컴포넌트 간 데이터 공유 효율성 극대화