Context API
애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 context를 이용하면 명시적으로 props을 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있다.

전역상태 관리 라이브러리와 다른 점이 뭘까?

Context란?

• Context는 부모 컴포넌트가 그 아래의 트리 전체에 데이터를 전달할 수 있도록 해준다.
• 아래와 같이 사용할 수 있다.

// 사용자 테마(라이트모드/다크모드)를 관리

// ThemeContext.js
import { createContext, useState, useContext } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleTheme = () => {
    setIsDarkMode(prevMode => !prevMode);
  };

  return (
    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

// App.js
import { ThemeProvider } from './ThemeContext';
import ThemedComponent from './ThemedComponent';

const App = () => {
  return (
    <ThemeProvider>
      <div className="App">
        <h1>Theme Switcher Example</h1>
        <ThemedComponent />
      </div>
    </ThemeProvider>
  );
};

export default App;

// ThemedComponent.js
import { useTheme } from './ThemeContext';

const ThemedComponent = () => {
  const { isDarkMode, toggleTheme } = useTheme();

  return (
    <div style={{
      background: isDarkMode ? '#333' : '#fff',
      color: isDarkMode ? '#fff' : '#333',
    }}>
      <h2>Themed Component</h2>
      <p>Current theme: {isDarkMode ? 'Dark' : 'Light'}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

export default ThemedComponent;

Context API는 과도한 리렌더링이 발생할 수 있다.

Context의 값이 변경될 때마다 해당 Context를 사용하는 모든 컴포넌트가 리렌더링 된다.

즉, context의 값 중 하나만 변경되어도 해당 Context를 사용하는 모든 컴포넌트가 리렌더링 되는 것이다.

값이 변경될 경우 해당 컨텍스트를 둘러싸고 있는 모든 컴포넌트가 리렌더링된다.

리액트 공식문서에서는 상태 변경 시에는 useCallback, 객체 생성 시에는 useMemo로 감싸서 성능 최적화를 하는 방법을 소개하고 있다.

그렇다면 항상 memo를 사용하여 최적화하면 되는 것 아닌가?

그렇지 않다..!

물론 memo를 사용하면 불필요한 리렌더링을 방지하여 성능을 개선할 수 있으나, memo 자체가 비교 연산을 수행한다.

같은 props로 렌더링이 자주 일어나는 경우라면 이점이 되겠으나 props가 자주 바뀌면 항상 props 비교 함수가 매번 동작하게 되는 것이다.

Context API는 전역 상태 관리도구가 아니다.

💡 상태관리의 정의

• 초기 값을 저장한다.
• 현재 값을 읽을 수 있다.
• 값 업데이트가 가능하다.

Context API는 상태 관리가 아니라 상태 주입을 도와주는 역할이다.

즉, 전역적으로 상태를 공유해주는 기능만 수행한다.

생각해보면 provider value에 어떤 값을 넣어주고 따로 관리하려면 useState, useReducer로 해야한다. 즉 상태만 공유받고 실질적인 관리는 하지 않는 것이다.

이러한 점이 redux, recoil, zustand 등과 같은 전역 상태관리 라이브러리와 대비되는 점이다.

그럼 어떤 상황에서 Context API를 사용하는 게 좋을까?

간단한 전역 상태 관리가 필요한 경우, 전역적으로 공유할 데이터가 적은 경우에 적합하다.

위에서 설명했듯 상태 변화가 잦은 경우 성능 저하를 초래할 수 있을 것이다.

애플리케이션이 크고 복잡해진다면 전역 상태 관리 라이브러리를 고려해볼 수 있다.

레퍼런스

Context API는 왜 쓰고, 그렇다면 Redux는 필요없을까?

useContext