Context API를 사용한 전역 값 관리

🙄 왜 사용하나요?

props drilling을 방지하기 위함이다.

Props drilling이란?

부모로 해당 props를 사용할 자식 컴포넌트로 전달하면서, 그 중간에서 props를 사용하지 않음에도 불구하고 props를 전달하는 것을 말한다.

그림으로 그리면 위와 같다. 중간 컴포넌트는 props를 사용하지 않으면서도 props를 전달하기 위해서 props가 거쳐가야 한다는 문제점이 있다.

props가 무엇이냐면 : https://actually-i-am.tistory.com/47

리액트의 기초 - props

contextAPI를 사용하면, 의미없이 props를 전달하는 대신 해당 state가 필요한 컴포넌트에 바로 state를 전달할 수 있다.

📚 사용 방법

ContextAPI를 어떨 때 쓰는지 알았으니 이제 사용법을 알아보자. 우선 리액트에서 제공하는 createContext메서드를 통해 context를 생성하고, 생성한 context를 context를 사용하고자하는 컴포넌트에 제공해야한다.

부모 컴포넌트

import React, {createContext} from 'react';
import ChildComponent from './ChildComponent';

export const context = createContext('기본값');

function ParentComponent(){
    return (
        <context.Provider value="초기값">
            <ChildComponent />
        </context.Provider>
    )
}

export default ParentComponent;

그리고 context로 제공되는 상태를 사용하고 싶은 컴포넌트에서 useContext메서드를 사용하여 값을 불러오면 된다. 이 context를 통해 상태뿐만 아니라 상태를 변경하는 함수, 객체 등을 불러와서 사용할 수 있다.

자식 컴포넌트

import React, {useContext} from 'react';
import {context} from './ParentComponent';

function ChildComponent(){
    const data = useContext(context);
    return (
        <div>{data}</div>
    );
}

export default ChildComponent;

😱 주의사항

하지만 이런 ContextAPI가 항상 좋은것만은 아니다. state가 자주 바뀐다면 ContextAPI를 사용하지 않는 것이 좋다. (ex. 초마다 state가 바뀌는 경우) → 왜냐하면 contextAPI의 state를 변경하면 Provider로 감싼 모든 컴포넌트들이 리랜더링 되기 때문이다.

자주 바뀌는 state값을 관리하기 위해서는 다른 상태관리 도구를 쓰는 것을 추천한다. (ex.리덕스)

📖 요약

• 사용 이유 : props drilling을 방지하기 위해서만 쓰는 것이 좋다.
• 사용 방법
  1. context만들기 : createContext

     • const MyContext = createContext('기본값');

  2. provider만들기 → 만들고 사용할 컴포넌트 감싸기

     • function MyProvider({children}){
           retyrn (
               <MyContext.Provider value="초기값">
                   {childrent}
               </MyContext.Provider>
           );
       }

  3. context사용하기 : useContext

     •  const text = useContext(MyContext);