React - createContext, provider, reducer

- 최상위에서

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

// reducer는 case문으로.
// action을 어떻게 처리할지 관리하는 함수
const reducer = (state, action) => {
    switch (action.type){
        case START_GAME:
            return {
                ...state,
                data: {
                    row: action.row,
                    cell: action.cell,
                    mine: action.mine,
                },
                openedCount: 0,
                tableData: plantMine(action.row, action.cell, action.mine),
                halted: false,
                timer: 0,
            };
        default:
            return state;
    }
}

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

    // 캐싱
    const value = useMemo(() => (
        { tableData: tableData, halted: halted, dispatch}), [tableData, halted]
        // dispatch 는 항상 같기때문에 대상배열에 넣지 않아도 된다.
    ); 

    return(
            // TableContext.Provider로 감싸면, 모든 자식 컴포넌트에서 value 를 가져다 쓸 수 있다.
            // 최적화가 힘든데, 따라서 useMemo로 캐싱을 해야한다.>> 캐싱해도 계속렌더링됨
            <TableContext.Provider value={value}>
                <Form/>
                <div>{timer}</div>
                <Table/>
                <div>{result}</div>
            </TableContext.Provider>
        );
});

export default MineSearch;

 

- provider내부의 컴포넌트에서 쓸 때에는 

 

const Form = memo(() => {
    const { dispatch } = useContext(TableContext);
    
    return (
        <div>
            
        </div>
    )
})