[React] 15장. Context API

📍 React Context API
React 애플리케이션에서 컴포넌트 간에 전역 상태를 관리하고 공유할 수 있도록 도와주는 기능

계층 구조가 깊은 컴포넌트에서도 Props Drilling(부모에서 자식, 손자 등으로 props를 계속 전달해야 하는 문제)을 방지하고 상태를 효율적으로 전달할 수 있다.

---

📍 React Context API 주요 개념

• Context 생성
  • React.createContext()를 사용해 Context를 생성함.
  • 기본값을 설정할 수 있음.
    
    
• Provider
  • Context 값을 하위 컴포넌트에 전달
  • 컴포넌트 트리에서 필요한 데이터를 감싸는 역할
    
    
• Consumer
  • Context에서 제공된 값을 읽는 역할
  • 함수 컴포넌트에서는 useContext 훅을 사용하는 것이 일반적

❓🤔 프로젝트 내에서 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태를 관리해야 할 때는 어떻게 해야 할까?

리액트 애플리케이션은 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리한다.

• 가정
  G 컴포넌트는 전역 상태를 업데이트시키고, F와 J 컴포넌트는 업데이트된 상태를 렌더링한다.

  그렇다면 App 컴포넌트에서는 다음과 같이 상태와 업데이트 함수를 정의해야 한다.

  const [value, setValue] = useState('hello');
  const onSetValue = useCallback(value => setValue(value), []);

  그리고 App이 지니고 있는 value 값을 F 컴포넌트와 J 컴포넌트에 전달하려면 여러 컴포넌트를 거쳐야 한다. F의 경우 App → A → B → F의 흐름이고, J의 경우 App → H → J의 흐름입니다.

  추가로 G 컴포넌트에 상태 업데이트 함수를 전달할 때도 App → A → B → E → G와 같이 복잡하게 여러 번 거쳐서 전달해야 한다.

실제 리액트 프로젝트에서는 더 많은 컴포넌트를 거쳐야 할 때도 있고 다루어야 하는 데이터가 훨씬 많아질 수도 있는데, 이런 방식을 사용하면 유지 보수성이 낮아질 가능성이 있다.

그렇기 때문에 리덕스나 MobX 같은 상태 관리 라이브러리를 사용해 전역 상태 관리 작업을 더 편하게 처리하기도 한다. 리액트 v16.3 업데이트 이후 Context API가 많이 개선되면서 별도의 라이브러리를 사용하지 않아도 전역 상태를 손쉽게 관리할 수 있게 되었다.

그림 15-3과 같이 기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 만들어 단 한 번에 원하는 값을 받아 와서 사용할 수 있다.

---

📍 Context API 사용법

• ① Context 생성

  import React, { createContext } from 'react';
  export const MyContext = createContext();

  • Context를 만들 때는 createContext 함수를 사용한다.
  • 파라미터에는 해당 Context의 기본 상태를 지정
    
    

• ② Provider로 데이터 제공

  • 생성한 context를 대상 컴포넌트에 데이터를 제공하기 위해 Provider로 대상 컴포넌트를 감싼다.
    
    

• ③ Provider로 데이터 제공

  // 예시
  import React, { createContext, useState } from 'react';
  
  export const MyContext = createContext();
  
  export const MyProvider = ({ children }) => {
   const [value, setValue] = useState("Hello, Context!");
  
    return (
     <MyContext.Provider value={{ value, setValue }}>
       {children}
     </MyContext.Provider>
   );
  };
  

  • Provider의 프로퍼티인 value에 전달할 데이터를 넣는다.
    • 여기서 MyProvider는 상태(value와 setValue)를 Context로 제공하는 컴포넌트이다.
    • value ⇒ Context에서 제공하는 데이터
      setValue ⇒ 상태를 업데이트하는 함수
      
      
  • 하위 컴포넌트는 MyProvider로 감싸야만 Context 데이터를 사용할 수 있다.
    
    

• ④ Context 사용(Consumer 또는 useContext)
  Provider의 value에 담은 데이터를 전달 할 때는, 2가지 방식으로 전달이 가능하다.
  Consumer 컴포넌트 또는 useContext라는 훅(Hook)이라는 방법이다.

  ✅ 단, 클래스형 컴포넌트에서는 Hook을 사용할 수 없다. 함수형 컴포넌트에서만 사용할 수 있음!!!
  
  

  • ✔ useContext 훅 사용하기
    useContext는 함수형 컴포넌트에서 Context를 더 간단히 사용할 수 있게 해줌!

    import React, { useContext } from 'react';
    import { MyContext } from './MyProvider';
    
    const MyComponent = () => {
    const { value, setValue } = useContext(MyContext);
    
    return (
      <div>
        <p>{value}</p>
        <button onClick={() => setValue("New Context Value")}>Update Value</button>
      </div>
    );
    };
    
    export default MyComponent;
    

    
    

  • ✔ Consumer 사용하기
    Consumer를 사용하면 함수형이나 클래스형 컴포넌트 모두에서 Context를 사용할 수 있음!

    import React from 'react';
    import { MyContext } from './MyProvider';
    
    const MyComponent = () => {
    return (
     <MyContext.Consumer>
       {({ value, setValue }) => (
         <div>
           <p>{value}</p>
           <button onClick={() => setValue("New Context Value")}>Update Value</button>
         </div>
       )}
     </MyContext.Consumer>
    );
    };
    
    export default MyComponent;

---

📍 Context API 사용 시 주의점

• 과도한 사용 자제

  • Context를 너무 많이 사용하면 성능이 저하될 수 있다.
  • 상태 관리가 복잡한 경우 Redux, Zustand 같은 전용 상태 관리 라이브러리를 고려한다.

• Provider 중첩

  • 여러 Context를 사용하면 Provider 중첩이 발생할 수 있어 Context 구조를 간결하게 유지한다.

• 최적화

  • 불필요한 컴포넌트가 렌더링되지 않게 React.memo 또는 useMemo를 사용하여 최적화할 수 있다.