🎨 Context API

Props Drilling

export const First = () => {
  const [num, setNum] = useState(0);

  return (
    <>
      <span>{num}</span>
      <Second num={num} />
    </>
  );
};
const Second = (props) => {
  return <Third num={props.num} />;
};
const Third = (props) => {
  return <Fourth num={props.num} />;
};
const Fourth = (props) => {
  return <span>{props.num}</span>;
};

다음과 같은 코드가 있다. 조금 이상하지만 상상력을 발휘해서 살을 붙여보자. num은 First에서 관리하고, First와 Fourth에서 사용한다.

하지만 쓸데없이 num을 Second, Third에도 전달해야한다. 컴포넌트 계층이 그렇게 되어있기 때문이다. 이러한 현상이 props drilling이다.

오직 전달만을 위한 props들이 하위 컴포넌트들에 다수 존재한다면 앱의 규모가 커질수록 좋지 않은 영향도 커질 것이다.

Component Composition

컴포넌트 합성을 통해 props drilling을 해결할 수도 있다. 위의 코드를 컴포넌트 합성으로 해결한 형태는 다음과 같다.

export const First = () => {
  const [num, setNum] = useState(0);

  return (
    <>
      <span>{num}</span>
      <Second>
        <Third>
          <Fourth num={num} />
        </Third>
      </Second>
    </>
  );
};
const Second = (props) => {
  return <>{props.children}</>;
};
const Third = (props) => {
  return <>{props.children}</>;
};
const Fourth = (props) => {
  return <span>{props.num}</span>;
};

전달만을 위한 props는 더이상 없고 상위 컴포넌트에서 바로 필요한 속성을 주입시켜줬다.

컴포넌트 합성으로만 해결할 수 있다면 굳이 Context를 사용하지 않아도 된다.

하지만 로그인 여부, 현재 테마 등 하나의 컴포넌트 트리가 아닌 다양한 곳에서 사용한다면 context를 사용하는 게 더 직관적으로 코드가 보일 수 있다.

Context

const myContext = createContext();

const MyStore = (props) => {
  const [info, setInfo] = useState({
    name: "lee",
    age: 27,
  });

  return (
    <myContext.Provider
      value={{
        info,
        onClick: () => {
          setInfo((prev) => ({ ...prev, age: prev.age++ }));
        },
      }}
    >
      {props.children}
    </myContext.Provider>
  );
};

우선 컨텐스트를 만들고 그것을 관리할 store 컴포넌트를 만들었다. 고정된 context 값이라면 따로 store가 필요없지만, 변동성이 있는 값이라고 가정했다.

const ContextConsumer = () => {
  const context = useContext(myContext);
  useEffect(() => {
    console.log("ContextConsumer is rendered!");
  });

  return (
    <div>
      <h1>Hello my name is {context.info.name}</h1>
      <h1>I'am {context.info.age} years old.</h1>
      <button onClick={context.onClick}>Click Me!</button>
    </div>
  );
};

const ContextInner = () => {
  useEffect(() => {
    console.log("ContextInner is rendered!");
  });

  return (
    <>
      <span>inner</span>
      <ContextConsumer />
    </>
  );
};

const ContextExample = () => {
  return (
    <MyStore>
      <ContextInner />
    </MyStore>
  );
};

context를 소비하는 건 다음과 같다. MyStore에 children으로 컴포넌트를 넘겨주고 필요한 컴포넌트에서 useContext 훅을 이용해 context를 사용한다.

이때 리렌더링 부분을 주의해서 봐야하는데, 버튼을 클릭해 context를 바꿔 MyStore가 리렌더링이 발생했지만 ContextInner 컴포넌트는 리렌더링이 발생하지 않는다.

Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 다시 렌더링 됩니다. Provider로부터 하위 consumer(.contextType와 useContext을 포함한)로의 전파는 shouldComponentUpdate 메서드가 적용되지 않으므로, 상위 컴포넌트가 업데이트를 건너 뛰더라도 consumer가 업데이트됩니다.

리액트 공식문서에 써있는 것처럼 context를 구독하는 모든 컴포넌트는 value가 바뀔 때마다 리렌더링이 발생한다.

Context가 정답일까?

const yourContext = createContext();

const YourStore = (props) => {
  const [job, setJob] = useState("unemployed");

  return (
    <yourContext.Provider value={job}>{props.children}</yourContext.Provider>
  );
};

다음과 같은 context를 하나 추가한다고 해보자. 이것을 Provider로 제공하려면 아래와 같이 해야한다.

const ContextExample = () => {
  return (
    <YourStore>
      <MyStore>
        <ContextInner />
      </MyStore>
    </YourStore>
  );
};

context가 추가될수록 코드는 점점 보기 힘들어질 것이다. 물론 조금 보기 좋게 만드는 기법도 존재하지면 이 글에서는 다루지 않겠다. 관심이 있다면 React context hell을 보길 바란다.

이것 말고도 문제가 또 있다.

const ContextExample = () => {
  return (
    <>
      <YourStore>
        <MyStore>
          <ContextInner />
        </MyStore>
      </YourStore>
      <ContextConsumer />
    </>
  );
};

만약 ContextConsumer을 다른 곳에서 재사용하려면 에러를 발생시킨다. context의 사용은 재사용성을 떨어뜨린다는 단점도 있다.

모든 도구가 그런 것처럼 항상 상황에 맞는 도구를 사용하는 게 좋다.