(S2) Week 5 TIL 41일차 220329 (React 상태 관리)

오늘의 학습목표

• Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
• Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
• Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
• Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.

학습내용

Action

Action은 어떤 액션을 취할 것인지 정의해 놓은 객체입니다.

Action을 통해 모든 변화를 주는 것은 만드는 앱에서 어떤 일이 일어나는지 직관적으로 보게 도움주는 역할을 합니다.

// type은 필수로 지정을 해 줘야합니다
// 그 외의 것들은 선택적으로 사용할 수 있습니다.
{ type: ‘ADD_TO_CART’, payload: request }

 

Dispatch

Dispatch는 Action을 전달하는 메서드입니다.

Dispatch의 전달인자로 Action 객체가 전달됩니다. 그리고 Reducer를 호출해 state의 값을 바꾸는 역할을 합니다.

Store

Redux 앱의 state가 저장되고, 관리되고 있는 하나뿐인 공간입니다.

Reducer

Reducer 는 현재의 state와 Action을 이용해서 새로운 state를 만들어 내는 순수함수 입니다.

Reducer의 Immutability(불변성)

Reducer 함수를 작성할 때 주의해야 할 점이 있습니다. 바로 Redux의 state 업데이트는 immutable한 방식으로 변경해야 한다는 것인데요. Redux의 장점 중 하나인 변경된 state를 로그로 남기기 위해서 꼭 필요한 작업입니다.

 

Action, Reducer, Dispatch, Store를 connect 할 수 있는 방법은 두가지가 있습니다.

1. connect 파라미터를 통해 mapStateToProps, mapDispatchToProps 등의 메서드를 이용하는 방법

2. Redux hooks를 이용하는 방법이 있습니다.

 

이 중에서 Redux hooks가 보다 최근에 나온 방법이고 비교적 사용하기 쉽습니다.

Redux hooks에서는 크게 useSelector(), useDispatch() 이 2가지의 메서드를 알고 있으면 됩니다.

useSelector()

컴포넌트와 state를 연결합니다. 컴포넌트에서 useSelector 메서드를 통해 store의 state에 접근할 수 있습니다.

useSelector의 전달인자로는 콜백 함수를 받으며, 콜백 함수의 전달인자로는 state 값이 들어갑니다.

useDispatch()

useDispatch()는 Action 객체를 Reducer로 전달해 주는 메서드입니다.

Action 이 일어날만한 곳은 클릭 등의 이벤트가 일어나는 컴포넌트입니다.

 

오늘의 회고

오늘은 운동간지 이틀째 되는 날입니다. 오늘 운동끝나고 마사지까지 받고와서 그런지 다시 활력을 되찾은 것 같습니다!

어제 그리고 운동을 해서 그런지 오늘 오후에 집중이 조금 괜찮게 되서 스프린트 끝내기는 다끝냈지만 끝내는데에 시간을 다써서 내일 디테일하게 파볼 예정입니다!