useReducer, useContext

렐루·2024년 5월 20일

1. 공식문서 내용 정리

https://ko.react.dev/learn/scaling-up-with-reducer-and-context

Reducer와 context를 결합해서 컴포넌트가 상위 state를 읽고 수정할 수 있도록 할 수 있습니다.

State와 dispatch 함수를 하위 컴포넌트들에 제공하는 방법

두 개의 context를 만듭니다(각각 state와 dispatch 함수를 위한 것).

Reducer를 사용하는 컴포넌트에 두 context를 모두 제공합니다.

하위 컴포넌트들에서 필요한 context를 사용합니다.

더 나아가 하나의 파일로 합쳐서 컴포넌트들을 정리할 수 있습니다.

Context를 제공하는 TasksProvider 같은 컴포넌트를 내보낼 수 있습니다.

바로 사용할 수 있도록 useTasks와 useTasksDispatch 같은 사용자 Hook을 내보낼 수 있습니다.

context-reducer 조합을 앱에 여러 개 만들 수 있습니다.

컴포넌트가 조금만 복잡해져도 State가 내려줘야할 깊이가 매우 깊어집니다.
또한 종류가 조금만 늘어나도 같은 코드를 많이 반복해줘야 합니다.

그럴 때 Context를 사용해서 부분적인 전역을 만들 수 있습니다.

2. 예시코드

// App.jsx
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
import { TasksProvider } from './TasksContext.js';

export default function TaskApp() {
  return (
    <TasksProvider>
      <h1>Day off in Kyoto</h1>
      <AddTask />
      <TaskList />
    </TasksProvider>
  );
}


// TasksContext.jsx
import { createContext, useContext, useReducer } from 'react';

const TasksContext = createContext(null);

const TasksDispatchContext = createContext(null);

export function TasksProvider({ children }) {
  const [tasks, dispatch] = useReducer(
    tasksReducer,
    initialTasks
  );

  return (
    <TasksContext.Provider value={tasks}>
      <TasksDispatchContext.Provider value={dispatch}>
        {children}
      </TasksDispatchContext.Provider>
    </TasksContext.Provider>
  );
}

export function useTasks() {
  return useContext(TasksContext);
}

export function useTasksDispatch() {
  return useContext(TasksDispatchContext);
}

function tasksReducer(tasks, action) {
  switch (action.type) {
    case 'added': {
      return [...tasks, {
        id: action.id,
        text: action.text,
        done: false
      }];
    }
    case 'changed': {
      return tasks.map(t => {
        if (t.id === action.task.id) {
          return action.task;
        } else {
          return t;
        }
      });
    }
    case 'deleted': {
      return tasks.filter(t => t.id !== action.id);
    }
    default: {
      throw Error('Unknown action: ' + action.type);
    }
  }
}

const initialTasks = [
  { id: 0, text: 'Philosopher’s Path', done: true },
  { id: 1, text: 'Visit the temple', done: false },
  { id: 2, text: 'Drink matcha', done: false }
];