#TIL 26일차(React Context API)

---

context API란?

Context API는 React에서 전역 상태 관리를 위한 방법 중 하나

⭐️ 컴포넌트 트리 전체에 데이터를 전달 가능
⭐️ props drilling 문제를 해결할 수 있음

📌 여기서 props drilling란?
→ 깊이 중첩된 컴포넌트 계층구조에서 중간 컴포넌트들이 불필요하게 props를 전달해야 하는 문제

필수 개념

• createContext : context를 생성
• useContext : context를 구독하고 해당 context의 현재 값을 읽음
• Provider : context를 하위 컴포넌트에게 전달

코드 예시

코드로 보는게 제일 이해가 빠를 듯하니 props만 사용했을 때와 context를 사용했을 때 예시 코드를 적어보도록 하겠다.

props만 사용한 예시

App.jsx

import React, { useState } from 'react';
import Header from './Header';
import UserProfile from './UserProfile';
const App = () => {
 const [user, setUser] = useState({ name: 'Mason' });
 return (
   <div>
     <Header user={user} />
     <UserProfile user={user} />
   </div>
 );
};
export default App;

Header.jsx

import React from 'react';
const Header = ({ user }) => {
  return (
    <header>
      <h1>Welcome, {user.name}</h1>
    </header>
  );
};
export default Header;

UseProfile.jsx

import React from 'react';
const Header = ({ user }) => {
  return (
    <header>
      <h1>Welcome, {user.name}</h1>
    </header>
  );
};
export default Header;

context 사용한 예시

UseContext.js

import React, { createContext, useState } from 'react';
const UserContext = createContext();
export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'Mason' });
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};
export default UserContext;

App.jsx

import React from 'react';
import { UserProvider } from './UserContext';
import Header from './Header';
import UserProfile from './UserProfile';
const App = () => {
  return (
    <UserProvider>
      <div>
        <Header />
        <UserProfile />
      </div>
    </UserProvider>
  );
};
export default App;

Header.jsx

import React, { useContext } from 'react';
import UserContext from './UserContext';
const Header = () => {
  const { user } = useContext(UserContext);
  return (
    <header>
      <h1>Welcome, {user.name}</h1>
    </header>
  );
};
export default Header;

UserProfile.jsx

import React, { useContext } from 'react';
import UserContext from './UserContext';
const UserProfile = () => {
  const { user } = useContext(UserContext);
  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
    </div>
  );
};
export default UserProfile;

여기서는 UserProvider를 통해 user 상태를 Context로 관리하고 있으며, Header와 UserProfile 컴포넌트는 useContext 훅을 사용하여 user 상태를 직접 접근할 수 있는 방식으로 구현되어 있는 걸 확인할 수 있다.

📌 즉 props drilling 없이 전역 상태를 간편하게 공유할 수 있다는 것!

지금은 코드가 길지 않아 큰 차이점을 못 느낄 수 있지만, 큰 프로젝트를 하게 되면 한번에 와닿게 된다. 이번 과제를 하면서도 props만 사용하다가 context를 사용해보니 조금 느꼈거든..🥹 하지만 뭐든 장점만 있는 것이 아니다.(사실 아직까진 장점만 크게 느끼고 있긴해..) 이번엔 장단점에 대해 적어보자.

Context API의 장단점

장점

• props drilling 해결: 상위 컴포넌트에서 하위 컴포넌트로 props를 여러 단계 거쳐 전달할 필요 x

• 전역 상태 관리: 여러 컴포넌트에서 동일한 상태를 쉽게 공유하고 접근할 수 있음

• 코드 가독성 향상: 상태와 관련된 코드가 분리되므로, 컴포넌트의 코드가 간결해지고 가독성 up

• 유지보수성 향상: 상태 관리를 Context API로 중앙 집중화하면, 상태 변경 시 수정해야 하는 코드 범위가 줄어들어 유지보수가 용이

단점

• 복잡성 증가: Context를 많이 사용하면 코드 구조가 복잡해질 수 있음

• 성능 문제: Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링되기 때문에 성능에 영향을 미칠 수 있음.
  → value 부분에 항상 신경 써줘야 함 ❗️❗️

• 제한된 사용: Context API는 전역 상태 관리에 적합하지만, 복잡한 상태 관리가 필요한 경우에는 Redux와 같은 상태 관리 라이브러리가 더 나은 선택이 될 수 있음
  → redux에 대해서도 조만간 작성해 볼 예정❗️❗️