03. 리액트 컨텍스트를 이용한 컴포넌트 상태 공유

useState와 useContext, 전역 상태를 위한 컨텍스트, 컨텍스트 사용하기

🔖 1. 정적 값을 이용해 useContext 사용하기

Context와 Provider

• 컨텍스트를 사용하면 props를 사용하지 않고도 부모 컴포넌트에서 트리 아래에 있는 자식 컴포넌트로 값을 전달할 수 있다. 즉, props를 제거하고도 코드에 문맥을 부여할 수 있는 것이다.

• 글을 쓸 때도 문맥을 위해 주제와 그 주제가 하는 일을 명확히 해야 한다. 이처럼 컨텍스트에서 Provider(공급자)는 컨텍스트 값을 하위 컴포넌트들에게 제공하는 역할을 한다.

• 예를 들어, 아래 코드에서 컨텍스트는 이렇게 말한다. "자, 이 글(코드)에서 주인공(color)는 black(기본값)이었다가, 어떤 상황에서는 red, 또 어떤 상황에서는 green...." 이 때 color가 어떠한 색으로 될 수 있는지 그 값은 provider가 제공한다.

예시 코드

import { createContext, useContext } from "react";

const ColorContext = createContext('black');

const Component = () => {
  const color = useContext(ColorContext);
  return <div style={{ color }}>Hello {color}</div>;
};

const App = () => (
  <>
    <Component />
    <ColorContext.Provider value="red">
      <Component />
    </ColorContext.Provider>
    <ColorContext.Provider value="green">
      <Component />
    </ColorContext.Provider>
    <ColorContext.Provider value="blue">
      <Component />
      <ColorContext.Provider value="skyblue">
        <Component />
      </ColorContext.Provider>
    </ColorContext.Provider>
  </>
);

export default App;

🔖 2. 추가적인 리렌더링에 관해

오버 엔지니어링? or not?

• 이 책에서는 중요하게 다룬 건 아니지만, 최근 고민했던 부분이었다.

• 리렌더링은 책에서 말하듯, 기술적으로 피해야 하는 불필요한 연산이다.

• 다만, 리팩토링을 하면서 드는 공수에 비해 성능에 크게 문제가 되지 않는 경우 어느정도 타협을 봤던 경험이 있다. 즉, 오버 엔지니어링을 굳이 하지 않은 것이다.

• 이력서 한 줄 채워넣을 수는 있겠으나, 한정된 시간 안에 더 중요한 것을 하는 것이 중요하다 생각했기 때문이다. 회사 차원에서도 충분히 이해해줄 것이다(?)

🔖 3. 전역 상태를 위한 컨텍스트 만들기

useReducer로 하나의 상태를 만들고 여러 개의 컨텍스트로 전파하기

• 하나의 전역 상태를 useReducer로 관리한다. 그리고 여러 개의 컨텍스트를 사용하여 상태의 일부를 필요한 컴포넌트들에게 배포한다.

• 상태 갱신 함수(dispatch)는 별도의 컨텍스트로 배포하여 필요할 때만 접근할 수 있게 한다.

• 핵심은, 불필요한 렌더링을 피하기 위해 여러 컨텍스트를 사용하는 것이다.

프로젝트에 적용해보기

import React, { createContext } from 'react';

// 상태 조각에 대한 컨텍스트 생성
const FilesContext = createContext();
const CurrentDirectoryContext = createContext();
const LoadingContext = createContext();

// 상태 갱신 함수(dispatch)에 대한 컨텍스트 생성
const StorageDispatchContext = createContext();

• 예를 들어, 파일과 디렉토리를 관리하는 Storage 애플리케이션 (e.g. Google Drive)이 있다.

• 전역 상태로는 files: 현재 디렉토리에 있는 파일 목록, curDir: 현재 디렉토리 경로, loading: 파일 로딩 상태 등이 있을 것이다.

• 그리고 상태 갱신 함수로는 파일 및 디렉토리 관련 액션을 처리하기 위한 dispatch 함수가 있을 것이다.