제로초 리액트 강의 8 Context API

createContext

import React, {useReducer, createContext} from 'react';
import Table from './Table';
import Form from './Form';

export const TableContext = createContext({  // createContext 함수 실행, 다른 파일에서 사용가능하도록 export, 초기값이 중요하지 않으므로 형식만 맞춰 넣음
  tableData: [],
  dispatch = () => {},
});

const initialState = {
  tableData: [],
  timer: 0,
  result: '',
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

const MineSearch = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return ( // 자식 컴포넌트들이 접근할 수 있도록 Provider로 묶어줌, 접근할 값은 value에 넣어줌
    <TableContext.Provider value={{tableData: state.tableData, dispatch}}>
    <Form dispatch={dispatch}/>
    <div>{state.timer}</div>
    <Table />
    <div>{state.result}</div>
    </TableContext.Provider>
  );
};

export default MineSearch;

 

 

context API가 성능 최적화하기가 어려움

const MineSearch = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <TableContext.Provider value={{tableData: state.tableData, dispatch}}> // 이렇게 쓰면 렌더가 될 때마다 객체가 새로 생김 > 객체를 사용하는 자식들도 매번 새롭게 리렌더링함
    <Form dispatch={dispatch}/>
    <div>{state.timer}</div>
    <Table />
    <div>{state.result}</div>
    </TableContext.Provider>
  );
};

 

렌더가 될 때마다 새로운 객체가 생성되고 그것을 사용하는 하위 컴포넌트들도 렌더가 다시 실행되므로 그렇지 않기 위해서 캐싱을 해줘야함 > useMemo 사용

const MineSearch = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const value = useMemo(() => ({tableData: state.tableData, dispatch}), [state.tableData]);

  return (
    <TableContext.Provider value={{tableData: state.tableData, dispatch}}>
    <Form dispatch={dispatch}/>
    <div>{state.timer}</div>
    <Table />
    <div>{state.result}</div>
    </TableContext.Provider>
  );
};

그러면 성능 저하가 덜 일어남

dispatch 함수는 절대로 바뀌지 않음, 항상 같게 유지 됨