contextAPI, provider 설정, createContext( )

createContext ( ) 기본 값을 넣을 수 있다.

 

contextAPI 

접근하고 싶은 COMPONENT를 PROVIDER로 묶어준다.

<TableContext.Provider value={ { tableData : state.tableData, dispatch }   }>

데이터는 value 에 넣는다.

 

자식 컴포넌트에서도 데이터값을 접근할 수 있다.

값은 value안에다 넣어주어야 한다.

 

const TableContext = createContext( { 

   

   tableData :  [ ],

    dispatch : ( ) => { },

 

});

 

const value = useContext(TableContext); 

 

useMemo를 사용하여 새로운 객체가 생기지 않도록 도와준다. 

렌더링을 하면 객체가 생겨 자식 컴포넌트에게 전달이 될 수 있기 때문임.

그 후, 언제 바뀌는지 배열 안쪽에 선언해주면 된다. 

 

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