TIL - 20220523

 오늘은 코드숨 리액트 과정의 4주차로 Redux에 대해 공부했다. 두고두고 보기 위해 간단히 정리해보면 다음과 같다.

 Redux는 Flux Architecture의 구조를 따르는데, 데이터의 흐름이 양방향이 아닌 단방향이라는 점, action이 dispatcher를 통해 store에 전달되는 흐름이 Redux의 핵심이다. Redux를 이용하면 상태 관리를 React가 해주지 않아도 되기 때문에 React에서 App은 오로지 view만 담당할 수 있게 되어 상태 관리 코드의 변경이 있어도 App은 관심사가 달라서 수정하지 않아도 된다는 큰 장점이 있다. Redux를 제대로 사용하려면 다음의 세 가지 원칙을 지켜야 한다.

1. 앱의 전역 상태는 store라는 하나의 객체에만 저장된다.
2. 상태값은 불변 객체다.
3. 상태값은 순수 함수에 의해서만 변경되어야 한다.

핵심 원칙을 처음 보면 이해가 잘 되지 않을 수 있는데, 다음 용어 정리와 함께 보면 이해가 될 것이다.

Action

 상태값은 오직 action 객체에 의해서만 변경되어야 한다. 액션 객체에는 type, payload 속성이 존재하는데, type은 action을 구분하기 위해 존재하는 속성이며, payload는 변경할 상태값이 전달되는 속성이다.

Reducer

 Redux에서 기존 상태를 다른 상태로 변경하는 함수를 Reducer라고 부르며, Reducer는 이전 상태와 액션 객체를 받아서 새로운 상태를 만드는 순수 함수이다. 핵심 원칙에서 말하는 세 번째 원칙의 순수 함수가 Reducer인 것이다.

Store

store는 Redux의 상태값을 저장하는 객체. Action은 store의 dispatch를 통해 시작되며, store는 action이 발생하면 reducer를 실행시켜 이전 상태값을 새로운 상태값으로 변경한다.

 

이렇게 Redux에 정리해보는 시간을 가졌는데, Redux를 사용할 때는 핵심 원칙을 최우선으로 지키면서 action, reducer, store의 기능과 역할을 항상 인지하고 있어야 Redux를 사용하는 이유를 제대로 보여줄 수 있으며 실수 하지 않을 것 같다. 이번 주에 과제를 진행하기 전에 매일 한 번씩 정독하고 과제 진행해야겠다.