21.10.20 use Reducer과 useContext

1. useReducer

state가 많고 state 변경하는 함수가 복잡할 때

useReducer 적용 전 App.js

useReducer 적용 후 App.js

하는 방법

그 많던 setState들을 useReducer로 바꿈 그리고 다른 파일에 저장.

다른 곳에 저장하고 이벤트 핸들러로 줬던 수 많은 set어쩌구 들을 dispatch({원하는 state: 값}) 로 변경

const [my_state, my_dispatch] = useReducer(my_reducer(=action타입에 따라 state들을 변경하는 함수), 초기상태(=객체든 값이든))

 

---

2. useContext

props 전달하는데 계층이 너무 많을 때

useContext 사용 전 : 3가지 계층으로 props를 세 번 타고 간다

useContext 사용 후 props.myname 이렇게 타고 가지 않아도 바로 boxName으로 사용 가능 

참고

boxName1 boxName2는 각 함수내에서 정의된 것이기 때문에 IndexContext만 잘 지켜주면 상관 x

 

---

3. 활용 useReducer과 useContext를 같이 사용한다면?

 

활용 2

동일한 결과