[React] Context API

 Context API
=> 부모에서 자식에게 props를 넘겨줄 때 한 단계씩 넘겨줘야하는데
     context를 이용하면 컴포넌트 트리 전체에 데이터를 제공 가능

import React, { useEffect, useReducer, createContext, useMemo } from "react";

export const TableContext = createContext({
  tableData: [],
  halted: true,
  dispatch: () => [],
});

const value = useMemo(
  () => ({ tableData: tableData, halted: halted, dispatch }),
  [tableData, halted]
);
  
return (
  <TableContext.Provider value={value}>
  <Form />
  <div>{timer}</div>
  <Table />
  <div>{result}</div>
  </TableContext.Provider>
);

createContext를 import해서 사용
createContext() 함수를 통해 전달하는 porps의 형식을 정의해줍니다.
반환값을 <TableContext.Provider> 태그로 묶어줍니다.
TableContext.Provider의 value 속성에 전달할 props를 입력합니다.

render가 발생할 때 마다 props부분도 계속 재생성 되어서 최적화를 위해
전달하는 값을 빼서 useMemo를 통해 최적화를 해줍니다.

 

자식 컴포넌트

import React, { useContext, memo } from "react";
import { TableContext } from "./MineSearch";
import Tr from "./Tr";

const Table = memo(() => {
  const { tableData } = useContext(TableContext);
  return (
    <table>
      {Array(tableData.length)
        .fill()
        .map((tr, i) => (
          <Tr rowIndex={i} />
        ))}
    </table>
  );
});

export default Table;