React-ContextAPI

React Context API란?

React Context API는 전역 상태를 쉽게 관리할 수 있도록 도와주는 기능입니다. 기존에는 props를 통해 부모 → 자식으로 데이터를 전달했지만, Context API를 사용하면 여러 컴포넌트에서 직접 데이터를 공유할 수있다.

1.기존 상태 관리 문제 (Props Drilling)

React에서는 일반적으로 부모에서 자식으로 props를 통해 데이터를 전달합니다. 하지만, 컴포넌트가 깊어지면 중간 단계에서 필요 없는 컴포넌트까지 props를 전달해야 하는 문제가 발생합니다. 이를 **"Props Drilling"**이라고 합니다.

 

const App = () => {
const user = { name: "John Doe", age: 30
}; return <Parent user={user} />; 
}; const Parent = ({ user }) => { return <Child user={user} />; 
}; const Child = ({ user }) => { return <p>이름: {user.name}, 나이: {user.age}</p>; };

위 코드를 보면 user 객체를 전달하기 위해 여러 컴포넌트를 거쳐야 하는 문제가 발생함

2. Context API를 활용한

Context API를 사용하면 props 없이 전역 상태를 직접 접근할 수 있습니다.

📌 Context API 사용 단계

1. Context 생성 (createContext)
2. Provider로 감싸서 데이터 제공 (Provider)
3. Consumer로 데이터 사용 (useContext)

 Context API 코드 예제

✅ 1) Context 생성

import React, { createContext, useContext, useState } from "react"; // Context 생성 const UserContext = createContext();

 

✅ 2) Provider로 데이터 제공

const UserProvider = ({ children }) => {
const [user, setUser] = useState({ name: "John Doe", age: 30 }
); return ( <UserContext.Provider value={user}> {children} </UserContext.Provider> ); };

UserContext.Provider를 사용해 user 데이터를 전역으로 제공

✅ 3) Consumer로 데이터 사용 (useContext)

const UserProfile = () => { const user = useContext(UserContext); return <p>이름: {user.name}, 나이: {user.age}</p>; };

 useContext(UserContext)를 사용해 어디서든 전역 데이터에 접근 가능

✅ 4) Context 적용하기 (App 컴포넌트)

const App = () => { return ( <UserProvider> <UserProfile /> </UserProvider> ); }; export default App;

✅ UserProvider로 감싸면 모든 하위 컴포넌트에서 user 데이터를 props 없이 사용 가능! 🚀

4️⃣ Context API vs Redux

비교 항목Context APIRedux

사용 목적	전역 상태 공유	복잡한 상태 관리
데이터 변경 방식	useState와 useContext	Reducer와 Action
사용 난이도	비교적 간단	비교적 복잡
추천 사용 사례	작은/중간 규모 프로젝트	대규모 상태 관리 필요할 때

💡 Context API는 간단한 상태 공유에 적합, Redux는 복잡한 상태 관리가 필요한 경우에 적합하다.

5️⃣ 언제 Context API를 사용해야 할까?

✅ 전역적으로 공유해야 하는 데이터가 있을 때
✅ Props Drilling(깊은 컴포넌트 트리에서 props 전달)이 발생할 때
✅ Redux를 쓰기에는 오버헤드가 클 때

🔥 결론: Context API를 사용하면?

• 전역 상태를 쉽게 관리할 수 있음
• props 전달 없이 데이터를 쉽게 공유 가능
• Redux보다 가벼운 상태 관리 도구로 활용 가능 🚀

💡 Spring Boot + React 프로젝트에서도 사용자 인증 정보, 다크 모드 상태, 다국어 설정 등을 Context API로 관리할 수 있음!