useContext

📌 useContext란?

useContext는 컴포넌트에서 context를 읽고 구독할 수 있게 해주는 React Hook입니다.

const value = useContext(SomeContext)

 

📌 useContext

컴포넌트 최상위 레벨에서 useContext를 호출하여 context를 읽고 구독합니다.

import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext);
  // ...

 

📍 매개변수

• context: 이전에 createContext로 생성한 context입니다. context 자체는 정보를 보유하지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낼 뿐입니다.

📍반환값

useContext는 호출하는 컴포넌트에 대한 context값을 반환합니다. 이 값은 호출한 컴포넌트에서 트리상 위에 있는 가장 가까운 SomeContext.Provider에 전달한 value입니다. 이러한 provider가 없는 경우 반환되는 값은 해당 context에 대해 createContext에 전달한 defaultValue가 됩니다. 반환된 값은 항상 최신 값입니다. React는 context가 변경되면 context를 읽는 컴포넌트를 자동으로 리렌더링 합니다.

 

📍주의사항

• 컴포넌트의 useContext() 호출은 동일한 컴포넌트에서 반환된 provider의 영향을 받지 않습니다. 해당 <Context.Provider>은 반드시 useContext() 호출을 수행하는 컴포넌트 위에 있어야 합니다.
• React는 변경된 value를 받는 provider부터 시작해서 해당 context를 사용하는 자식들에 대해서까지 전부 자동으로 리렌더링을 합니다. 이전 값과 다음 값은 Object.is로 비교합니다. memo로 리렌더링을 건너뛰어도 새로운 context값을 수신하는 자식들을 막지는 못합니다.

📌 사용방법

1️⃣ 트리 깊숙이 데이터 전달하기

컴포넌트 최상위 레벨에서 useContext를 호출하여 context를 읽고 구독합니다.

import { useContext } from 'react';

function Button() {
  const theme = useContext(ThemeContext);
  // ...

useContext는 전달한 context에 대한 context값을 반환합니다. context 값을 결정하기 위해 React는 컴포넌트 트리를 검색하고 특정 context에 대해 위에서 가장 가까운 context provider을 찾습니다.

 

context를 button에 전달하려면 해당 버튼 또는 상위 컴포넌트 중 하나를 해당 context provider로 감쌉니다:

function MyPage() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  );
}

function Form() {
  // ... renders buttons inside ...
}

provider과 button 사이에 얼마나 많은 컴포넌트 레이어가 있는지는 중요하지 않습니다. Form내부의 Button이 useContext(ThemeContext)를 호출하면 "dark"를 값으로 받습니다.

 

2️⃣ context를 통해 전달된 데이터 업데이트하기 

시간이 지남에 따라 context가 변경되기를 원하는 경우가 종종 있습니다. context를 업데이트하려면 state와 결합해야 합니다. 부모 컴포넌트에 state 변수를 선언하고 현재 state를 context값으로 provider에 전달합니다.

function MyPage() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
      <Form />
      <Button onClick={() => {
        setTheme('light');
      }}>
        Switch to light theme
      </Button>
    </ThemeContext.Provider>
  );
}

이제 provider 내부의 모든 Button은 현재 theme 값을 받게 됩니다. provider에게 전달한 theme 값을 업데이트하기 위해 setTeme을 호출하면 모든 Button 컴포넌트가 새로운 light값으로 리렌더링 됩니다.

 

3️⃣ fallback 기본값 지정하기

React가 부모 트리에서 특정 context의 provider들을 찾을 수 없는 경우, useContext()가 반환하는 context 값은 해당 context를 생성할 때 지정한 기본값과 동일합니다:

const ThemeContext = createContext(null);

기본값은 절대 변경되지 않습니다. context를 업데이트하려면 앞서 설명된 대로 state를 사용하세요.

null 대신 기본값으로 사용할 수 있는 더 의미 있는 값이 있는 경우가 많습니다. 예를 들어:

const ThemeContext = createContext('light');

이렇게 하면 실수로 해당 provider 없이 일부 컴포넌트를 렌더링해도 중단되지 않습니다. 또한 테스트 환경에서 많은 provider을 설정하지 않고도 컴포넌트가 테스트 환경에서 잘 작동하는데 도움이 됩니다. 

 

4️⃣ 트리 일부에 대한 context 재정의하기

트리의 일부분을 다른 값의 provider로 감싸 해당 부분에 대한 context를 재정의할 수 있습니다.

<ThemeContext.Provider value="dark">
  ...
  <ThemeContext.Provider value="light">
    <Footer />
  </ThemeContext.Provider>
  ...
</ThemeContext.Provider>

필요한 만큼 provider들을 중첩하고 재정의할 수 있습니다.

 

5️⃣ 객체 및 함수 전달 시 리렌더링 최적화

context를 통해 객체와 함수를 포함한 모든 값을 전달할 수 있습니다.

function MyApp() {
  const [currentUser, setCurrentUser] = useState(null);

  function login(response) {
    storeCredentials(response.credentials);
    setCurrentUser(response.user);
  }

  return (
    <AuthContext.Provider value={{ currentUser, login }}>
      <Page />
    </AuthContext.Provider>
  );
}

여기서 context값은 두 개의 프로퍼티를 가진 JavaScript 객체이며, 그중 하나는 함수입니다. MyApp이 리렌더링 할 때마다(예: 라우트 업데이트), 이것은 다른 함수를 가리키는 다른 객체가 될 것이므로 React는 useContext(AuthContext)를 호출하는 트리 깊숙한 곳의 모든 컴포넌트도 리렌더링해야 합니다.

소규모 앱에서는 문제가 되지 않았습니다. 그러나 currentUser과 같은 기초 데이터가 변경되지 않았다면 리렌더링할 필요가 없습니다. React가 이 사실을 활용할 수 있도록 login 함수를 useCallback으로 감싸고 객체 생성은 useMemo로 감싸면 됩니다.

import { useCallback, useMemo } from 'react';

function MyApp() {
  const [currentUser, setCurrentUser] = useState(null);

  const login = useCallback((response) => {
    storeCredentials(response.credentials);
    setCurrentUser(response.user);
  }, []);

  const contextValue = useMemo(() => ({
    currentUser,
    login
  }), [currentUser, login]);

  return (
    <AuthContext.Provider value={contextValue}>
      <Page />
    </AuthContext.Provider>
  );
}

이 변경으로 인해 MyApp이 리렌더링해야 하는 경우에도 currentUser가 변경되지 안는 한 useContext(AuthProvider)를 호출하는 컴포넌트는 리렌더링 할 필요가 없습니다.