React 컴포넌트 트리에 데이터 공급하기

Context
Props Drilling
Context.Provider
리팩터링
useContext
구조 재설계와 Context 분리

Context

React Component Tree 전체를 대상으로 Data를 공급하는 기능 Props Drilling 문제를 해결하기 위해 Context 사용 ContextAPI는 Context를 만들고 다루는 React 기능  - React.createContext() : Context 생성  - MyContext.Provider : Context 배포  - useContext() :

//App.js
import React from "react";
import { useMemo, useCallback, useReducer, useRef, useState } from "react";
import "./App.css";
import Header from "./component/Header";
import TodoEditor from "./component/TodoEditor";
import TodoList from "./component/TodoList";

(중략...)

//Context 생성
// export const TodoContext = React.createContext();
export const TodoStateContext = React.createContext();
export const TodoDispatchContext = React.createContext();

function App() {

  (중략...)

  return (
    <div className='App'>
      <Header />
      {/*<TodoContext.Provider value={{ todo, onCreate, onUpdate, onDelete }}>*/}
      <TodoStateContext.Provider value={todo}>
        <TodoDispatchContext.Provider value={memoizedDispatches}>
          <TodoEditor />
          <TodoList />
        </TodoDispatchContext.Provider>
      </TodoStateContext.Provider>
      {/*</TodoContext.Provider>*/}
    </div>
  );
}

export default App;

//TodoEditor.js
import { useContext, useRef, useState } from "react";
import "./TodoEditor.css";
import { TodoDispatchContext } from "../App";

const TodoEditor = () => {
  const { onCreate } = useContext(TodoDispatchContext); 
  const [content, setContent] = useState("");
  const inputRef = useRef();

  (중략...)
  
  return (
    <div className='TodoEditor'>
      <h4>새로운 Todo 작성하기✔</h4>
      <div className='editor_wrapper'>
        <input
          ref={inputRef}
          value={content}
          onChange={onChangeContent}
          onKeyDown={onKeyDown}
          placeholder='새로운 Todo...'
        />
        <button onClick={onSubmit}>추가</button>
      </div>
    </div>
  );
};
export default TodoEditor;​

import { useContext, useMemo, useState } from "react";
import { TodoStateContext } from "../App";
import TodoItem from "./TodoItem";
import "./TodoList.css";

const TodoList = () => {
  //const storeData = useContext(TodoContext); //Context가 공급하는 데이터를 storeData에 저장
  // const { todo, onUpdate, onDelete } = useContext(TodoContext); //구조분해할당
  //const { todo } = useContext(TodoContext); //구조분해할당
  const todo = useContext(TodoStateContext);

  const [search, setSearch] = useState("");

  (중략...)

  return (
    <div className='TodoList'>
      <h4>Todo List🤷‍♂️</h4>
      (중략...)
      <div className='list_wrapper'>
        {getSearchResult().map((it) => (
          <TodoItem key={it.id} {...it} />
        ))}
      </div>
    </div>
  );
};
export default TodoList;