TIL - 21.08.13 👨‍💻

---

Redux

어제도 메소드들을 대략적으로 정리했었지만 다시 한번 정리를 해보려고 한다.

Store

상태가 관리되는 오직 하나의 공간이다.
createStore() 메소드의 첫번째 인자는 리듀서의 위치이고 두번째 인자로 store의 초기값을 넣을 수 있다.

Action

객체 안에 타입이라는 프로퍼티 키가 무조건 있어야하고, 그 다음으로 다른 키를 가진 프로퍼티를 사용할 수 있다.

Reducer

현재 상태와 Action을 이용해 다음 상태를 만들어 낸다.

Action 객체가 dispatch에게 인자로 전달되고, dispatch는 Reducer를 호출해서 새로운 state를 생성한다.

여기서 dispathch는 일종의 이벤트 핸들러라고 생각하면 된다.
이 이벤트 핸들러가 실행이 되었을때 dispatch가 Reducer를 호출해 인자를 action 객체를 리듀서 안으로 던져준다. 그리고 리듀서가 해당 action 객체를 두번째 매개변수로 받아서 결론적으로 상태를 변경시킨다.

-> 데이터가 한 방향으로 흘러야하기 때문.

---

Redux의 장점

1. 상태를 예측 가능하게 만들어준다.
2. 유지보수
3. 디버깅에 유리하다. (action과 state log 기록 시)
4. 테스트를 붙이기 쉽다.

---

리덕스의 3원칙과 연결된 개념

1. Single source of truth -> Store
   • 같은 상태는 한가지 출처로부터 받는다.
2. State is read-only -> Action
   • action으로만 상태 값 변경이 가능하다.
   • action 객체와 reducer를 이용해 store를 변경할땐 store의 데이터와 다른 주소값을 가진 데이터를 반환해야한다.
3. Changes are made with pure function -> Reducer
   • reducer는 외부에 영향을 받지도 않으며 state 외부에 영향을 주지도 않는다.

---

Presentational Component vs Container Component

	Presentational	Container
기능	어떻게 보여지는가?	어떻게 동작하는가?
Redux와 연관성	없음	있음
Read Data	Props에서 data를 읽음	Redux의 State에 접근(useSelector)
Change data	props에서 콜백을 호출	Redux Action

프레젠테이션 컴포넌트는 메뉴 안의 메뉴들이고 컨테이너는 그 메뉴들을 담고 있는 메뉴라고 생각하면 편하다.

---

대표적인 Redux Hook

useSelector

컴포넌트와 스테이트를 연결해주는 훅이다.
디스패치를 사용해야하는 컴포넌트에서 디스패치를 사용하기 전에 사용해주는 것으로 컴포너트와 스테이트를 연결해준다.

import {useSelector} from 'react-redux';

const state = useSelector(state => state.Reducer)

---

useDispatch

액션 객체를 리듀서에 전달해주는 역할을 하는 훅이다.

import { useSelector, useDispatch } from 'react-redux'

const state = useSelector(state=> state.Reducer)
const dispatch = useDispatch();

dispatch((e)=>{type: 'ADD', payload: {key: e}})

이런 식으로 사용한다.

---

Retrospect 🧐

오늘 리덕스를 다시 공부해봤다.
리덕스 훅을 처음봤을때 dispatch?? 스토어는 어디에 붙힌거지? 이렇게 어리버리했었는데
조금 익숙해지니까 이 방법 밖에 못쓸 것 같다.

리덕스도 재밌어서 배우는 맛이 있다!
뜬금 없지만 파이썬도 기대된다!!