Redux를 사용하는 이유
- redux는 기존의 조부모 → 부모 → 손자 의 식으로 필요가 없어도 손자 컴포넌트에 전달하기 위해 부모 컴포넌트를 거쳐야하는 불편함을 없애주고자 전역상태 useState를 통해 상태를 관리해주는 도구이다.
Redux의 사용구조
redux에서 redux를 조회하는 hook
-
useSelector라는 훅을 사용한다(중요)
const number = useSelector(state => state.counter.number); // 0
이렇게 counter라는 컴포넌트에서 number라는 훅을 사용하고 싶다면 위와 같이 작성해주면 된다. -
reducer 의 흐름
1) View 에서 액션이 일어난다
2) dispatch 에서 action이 일어나게 된다
3) action에 의한 reducer함수가 실행되기 전에 middleware게 작동
4) middleware에서 명령을 내린 일을 수행하고 난 뒤 reducer함수가 실행
5) 받아온 state와 action 값을 reducer의 실행결과 store에 새로운 값 저장
6) store의 state에 변경된 값을 준다.
※ action === 명령 === 액션객체
※ 액션객체를 reducer에 보내기 위해서 useDispatch()를 사용한다.
→ 즉 ()안에 액션객체가 들어간다.
dispatch({ type: "PLUS_ONE" }); ← 이와 같이 dispatch 안에 타입을 넣고 실행한다.
해야할일
① 팬레터 redux로 LocalUseState 적용해보기
② 알고리즘 풀이
③ 팬레터 개인 미니프로젝트 기존의 todolist미니프로젝트와 비교해보며 구현해보기
느낀점
- 강의를 보고 익힐때는 전체적인 느낌은 알겠다. 프로젝트를 만들면서 내껄로 만드는 연습을 해야겠고, 프로젝트 요구사항에 맞춰서 구현해보는 연습을 게속 해본다면 실무에서도 큰 도움이 될 것 같다.
어려웠던 점
- 역시 전역상태관리와 지역상태관리를 분리하여 알맞게 import,export하기 위해 설계하고 효율적인 로직을 구성하는 부분이 머리속에서 그려지지 않는 부분에서 어려움이 있었습니다ㅏ.
