[React] 리덕스와 useReducer +context API(createContext,useContext)

Q. useReducer, context API가 리덕스를 대체할 수 있는가 ? 소규모앱에서는 대체 가능하나, 규모가 크다면 결국 리덕스를 써야함.. 왜? 비동기처리부분에서 useReducer+context API는 불편함.. 성능최적화 문제..(useMemo로 캐싱을해서 사용해야 성능 개선)

Q. useReducer ? state, dispatch 사용가능.. 리덕스에서 차용.. 리덕스는 state가 동기적으로 바뀌지만 useReducer는 비동기적으로 바뀐다.

** reducer 어원 ? 뭔가를 줄인다...

const initialState = {
winner:``;
turn:`0`;
tableData:[[``,``,``],[``,``,``]]
}

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

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

const onClickTable = () => dispatch({type:`SET_WINNER`, winner: `0`})

return (
<>
<Table onClick={onClickTable}) />
{state.winner && 
<div> {state.winner} 님의 승리 </div>}
</>
)}

Q. context API ? 부모와 자식의 다층관계에서 prop문법 쓰기 힘드니까 쓴다. 설정을 하면 안에 들어있는 모든 컴포넌트에서 state를 받아쓸 수 있다.

import {createContext} from `react`;
export const TableContext = createContext(초기값{tableData:[], dispatch:()=>{}});
.
.
.
return(
<TableContext.Provider value={{tableData:state.tableData, dispatch}}>
	<component1 />
	<component2 />
</TableContext.Provider>
)

Q. useContext ? state를 받아서 쓰는 컴포넌트에서 사용. 전달받은 값(state, dispatch)를 사용한다.

import {useContext} from `react`;

const value = useContext(TableContext);