[React] Context를 알아보자.

1. 이전에 간단하게 Context를 사용한 예시에 대해서 글을 적었는데, 또 많은 부분을 공부하게 되어서 추가적으로 적어보는 시간을 가지려고 합니다.

❓ Context란?

1. 컨텍스트 개념을 리액트에선 이렇게 설명합니다.

보통의 경우 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달합니다. 그러나 중간에 많은 컴포넌트를 거쳐야 하거나, 애플리케이션의 많은 컴포넌트에서 동일한 정보가 필요한 경우에는 props를 전달하는 것이 번거롭고 불편할 수 있습니다. Context를 사용하면 명시적으로 props를 전달해주지 않아도 부모 컴포넌트가 트리에 있는 어떤 자식 컴포넌트에서나 (얼마나 깊게 있든지 간에) 정보를 사용할 수 있습니다.

1. 즉 drilling의 문제를 해결하기 위한 개념이라고 생각됩니다.

❗️ 사용법

Constext를 만드는 방법은 다음과 같습니다.

import { useState } from "react";

const ThemeContext = createContext();

createContext() 메서드의 인자는 없어도 되고, Default Value를 설정할 수 있습니다.

const ThemeContext = createContext('Default Value');

Default Value를 사용하는 것은 유용하지 않습니다. 상태를 변경할 수 없기 때문입니다.

초기 값을 설정하지 않고 다음과 같이 사용할 수 있습니다.

export const ThemeContext = createContext(null);

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

Provider 컴포넌트로 감싸주게 되면, 내부 자식 요소에서 ThemeContext 값을 사용할 수 있게 됩니다.

❗️ context를 사용한 커스텀 훅

1. 위의 예시를 사용하면서, usecontext를 사용하게 되면 타입 에러가 발생하게 됩니다.

export const ThemeContext = createContext<string | null>(null);

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

function Page() {
   const theme = useContext(ThemeContext) // null일 수 있음.
  
  return //...
}

1. 이는 타입 확언으로 변경할 수 있지만, 문제가 발생될 여지가 많습니다.

function Page() {
   const theme = useContext(ThemeContext)! // null 값인 경우 작동이 멈출 수 있다
  
  return //...
}

1. 따라서 다음과 같은 커스텀 훅을 사용하여 useContext를 사용할 수 있습니다.

const useMyContext = (contextValue) => {
  const context = useContext(contextValue);

  if (!context) {
    // Error Handling
    throw new Error("ERROR");
  }
  return context;
};

export default useMyContext;

1. 이 useMyContext훅을 사용하게 된다면, null일 경우 에러를 발생해 예상치 못한 에러를 막을 수 있습니다.

❗️ 컨텍스트의 목적

1. 컨텍스트는 상태관리가 아니다. 결국 상태관리는 useState, useReducer로 해결해야 한다.
2. context + useState 까지가 상태관리의 개념이라고 생각한다.
3. 즉 컨텍스는 props의 drilling을 해결하는 것 그 이상 이하도 아니다.