[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);
Author And Source
이 문제에 관하여([React] 리덕스와 useReducer +context API(createContext,useContext)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kenatman/React-리덕스와-useContext-context-API저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)