Context API

createContext import 후 함수 호출 및 초기값 셋팅

import {createContext } from 'react'
export const TableContext = createContext({ //초기값 넣어준다.
	data:[],
    dispatch: () => {} //초기값 없으면 모양만 잡아줌
})

데이터를 사용 할 컴포넌트를 provider로 묶어준 뒤 데이터를 넣어준다.

<Context.Provider value={{tableData: state.tableData, dispatch}}>
	<Component>
</Context.Provider>

위 같이 value를 직접 넣어주면 렌더링 될 때마다 객체가 새로생긴다. 즉 자식들도 매번 새로 리렌더링 된다.(성능 문데) 때문에 useMemo로 캐싱해준다.

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

• dispatch는 항상 같기 때문에 배열안에 추가 안 해도 된다.

useContext로 컴포넌트에서 데이터를 가져온다.

import {useContext} from 'react'
import {TableContext} from './'
const {dispatch} = useContext(TableContext);