Context API 사용법

참고 자료: 생활코딩, reactjs.org

createContext

1. reactjs.org API 설명

const MyContext = React.createContext(defaultValue);

• Context 객체를 만듭니다. Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때 React는 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재값을 읽습니다.
• defaultValue 매개변수는 트리 안에서 적절한 Provider를 찾지 못했을 때만 쓰이는 값입니다. (reactjs.org API 참고)

2. 생활코딩 예제

const themeDefault = { border: '10px solid green' };
const themeContext = createContext(themeDefault)

• createContext라는 함수를 이용해서 context를 만든다
• createContext의 첫 번째 파라미터에 기본값을 전달한다. 그 값이 우리가 생성한 context의 기본값이 된다.(Provider 만들어서 value 값을 주지 않았을 때의 기본값인 듯)

useContext

1. reactjs.org API 설명

const value = useContext(MyContext);

• Accepts a context object (the value returned from React.createContext) and returns the current context value for that context. The current context value is determined by the value prop of the nearest <MyContext.Provider> above the calling component in the tree.
• When the nearest <MyContext.Provider> above the component updates, this Hook will trigger a rerender with the latest context value passed to that MyContext provider.

2. 생활코딩 예제

const theme = useContext(themeContext);
console.log(theme) // { border: '10px solid green' }

• 컴포넌트 안에서 useContext를 사용한다.
• 어떤 context를 사용할지를 정해서 useContext 첫 번쨰 파라미터로 전달한다.

Provider

1. reactjs.org API 설명

• The Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Provider 하위에 또 다른 Provider를 배치하는 것도 가능하며, 이 경우 하위 Provider의 값이 우선시됩니다
• All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes.

2. 생활코딩 예제

function Sub1() {
  const theme = useContext(themeContext);
  return (
    <themeContext.Provider value={{border: 10px solid yellow}}>
      <div>
        <Sub2 />
      </div>
    </themeContext.Provider>
  );
}

• context를 전달하고 싶은 컴포넌트를 (부모 컴포넌트 안에서) Provider로 감싸고 value 값을 전달한다 (Provider를 사용하면 value를 꼭 전달해야 한다)

• 컴포넌트 안에서 useContext를 사용할 때, useContext가 리턴하는 값은 가장 가까운 조상 안의 Provider의 value값이다.