[ React ] Context API 란?

Context API는 React에서 전역 상태(state)를 쉽게 관리하게 해주는 도구이다.

특정 데이터를 여러 컴포넌트에서 공유해야 할 때 유용하다.

 

언제 Context API를 사용할까?

---

1. 전역 상태를 여러 컴포넌트에서 공유해야 할 때 (예: 로그인 정보, 다크모드 설정, 언어 설정)

2. props를 너무 깊이 전달해야 할 때 (props drilling 해결)

3. Redux를 사용할 정도는 아니지만, 전역 상태 관리가 필요할 때 (Redux는 store, action, reducer 등의 복잡한 구조가 필요함)

4. 테마(다크모드), 언어 설정 같은 전역 UI 상태 관리할 때

 

Context API를 쓰지 말아야 할 경우

---

1. 단순한 상태 관리 (useSate로 충분할 때)

2. 자주 변경되는 데이터 (성능 문제 발생 가능)

 

 

 

Context API를 사용한 예제 - 유저 인증 정보 (Auth)

---

로그인한 사용자 정보를 여러 컴포넌트에서 공유할 때의 예제 코드를 작성해 보았다.

 

Context API 적용 전 (Props Drilling)

const App () => {
  const [user, setUser] = React.useState({ name: 'Alice', loggedIn: true });
  return <Dashboard user={user} />;
}

const Dashboard = ({ user }) => {
  return <Profile user={user} />;
}

const Profile = ({ user }) => {
  return <p>현재 로그인한 사용자: {user.name}</p>;
}

 

위 코드의 문제점

• user 값을 parent -> child로 계속 전달해야 한다.
• 컴포넌트가 많아지면 유지보수가 어려워진다.

해결 방법

• Context API를 사용해 child에서 user로 바로 가져오기.

 

Context API 적용 후

const UserContext = React.createContext(); // Context 생성

const App = () => {
  // user 상태가 변하면 모든 하위 컴포넌트에서 자동으로 업데이트된다
  const [user, setUser] = React.useState({ name: 'Alice', loggedIn: true });
    
  return ( // Provider로 값 전달하고 value에 공유하고 싶은 상태(state)를 넣어준다
    <UserContext.Provider value={user}> 
      <Profile />
    </UserContext.Provider>
  );
}

const Profile = () => {
  return (
    <div>
      <h2>사용자 프로필</h2>
      <UserInfo />
    </div>
  )
}

const UserInfo() {
  const user = React.useContext(UserContext); // 값을 가져와서 사용
  return <p>로그인한 사용자: {user.name}</p>;
}