반응형
React 컴포넌트끼리 데이터를 주고받는 기본 방식은 props입니다.
하지만 props를 너무 많이 전달하면 코드가 복잡해지기 쉬워요.
이럴 때 등장하는 구조가 바로 Context API입니다.
이 포스팅에서는 props와 Context가 어떤 차이가 있고
언제 어떤 걸 쓰는 게 좋은지 흐름도와 예제 중심으로 이해하기 쉽게 알려드릴게요.
✅ 기본 개념 요약
항목 | Props | Context API |
목적 | 부모 → 자식 데이터 전달 | 전역 상태 공유 |
사용 대상 | 단일/소수의 컴포넌트 | 여러 컴포넌트 간 데이터 공유 |
단점 | 중첩이 깊으면 props drilling 발생 | 구조 파악이 어려워질 수 있음 |
장점 | 명시적인 데이터 전달 | 전역 접근 가능, props 생략 가능 |
1️⃣ Props로 상태 전달하는 기본 예제
function Parent() {
const message = 'Hello!';
return <Child text={message} />;
}
function Child({ text }) {
return <p>{text}</p>;
}
✔️ 간단한 구조에서는 props가 깔끔합니다.
2️⃣ 중첩되면 발생하는 문제: Props Drilling
<GrandParent>
<Parent>
<Child>
<TargetComponent data={value} />
</Child>
</Parent>
</GrandParent>
✔️ value를 직접 쓰는 컴포넌트는 TargetComponent 뿐인데, 중간 컴포넌트들이 전부 전달해야 함 → 비효율
3️⃣ Context API로 간단하게 공유하기
✅ Context 생성
import { createContext } from 'react';
export const MyContext = createContext();
✅ Context Provider로 감싸기
<MyContext.Provider value={{ name: 'Jonbeo' }}>
<MyComponent />
</MyContext.Provider>
✅ 하위 컴포넌트에서 사용하기
import { useContext } from 'react';
import { MyContext } from './MyContext';
function MyComponent() {
const { name } = useContext(MyContext);
return <p>{name}</p>;
}
✅ 언제 Context를 쓰면 좋을까?
- 로그인 정보, 다크모드, 언어 설정 등 전역 상태
- 여러 컴포넌트에서 동일한 값을 써야 할 때
- 불필요한 props 전달을 줄이고 싶을 때
하지만!
- 작은 앱에서 너무 많은 Context를 쓰면 오히려 구조가 더 복잡해질 수 있습니다.
🔄 요약 흐름도
- Props → 단방향 흐름 (명시적, 명확함)
- Context → 전역 공유 흐름 (간결하지만 구조 파악이 어려울 수 있음)
✅ 마무리하며
상황 | 추천 방식 |
간단한 데이터 전달 | Props |
깊은 중첩 or 전역 상태 | Context |
사용자 정보, 테마, 언어 등 전역 설정 | Context |
코드 추적이 쉬운 구조 유지 | Props (명시적 전달) |
Props와 Context는 서로를 대체하는 게 아니라 상황에 따라 함께 쓰는 것이 중요합니다!
반응형
'React' 카테고리의 다른 글
useState vs useReducer 차이점은? 상태관리 기초 개념과 예제로 쉽게 정리하기 (0) | 2025.07.08 |
---|---|
React Router DOM v6 완전 기초 정리! 페이지 이동부터 중첩 라우팅까지 한눈에 보기 (0) | 2025.07.07 |
실전 대시보드 UI 만들기 – MUI 또는 Ant Design으로 관리자 화면 구성하기 (0) | 2025.06.15 |
Ant Design 테마 커스터마이징 완전정복 – 토큰 시스템으로 나만의 스타일 만들기 (1) | 2025.06.14 |
MUI 테마 커스터마이징 완전정복 – 나만의 디자인 시스템 만들기 (0) | 2025.06.13 |