React

Props vs Context API? 차이와 흐름도, 예제로 완벽하게 이해하기

jonbeo 2025. 7. 9. 09:08
반응형

 

 

React 컴포넌트끼리 데이터를 주고받는 기본 방식은 props입니다.
하지만 props를 너무 많이 전달하면 코드가 복잡해지기 쉬워요.
이럴 때 등장하는 구조가 바로 Context API입니다.

이 포스팅에서는 propsContext가 어떤 차이가 있고
언제 어떤 걸 쓰는 게 좋은지 흐름도와 예제 중심으로 이해하기 쉽게 알려드릴게요.


 

✅ 기본 개념 요약

항목 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는 서로를 대체하는 게 아니라 상황에 따라 함께 쓰는 것이 중요합니다!

반응형