Redux 탐험기

결국.. '이걸' 쓸 일이 오고 말았다.

사실 Context가 요새는 너무 잘 나와서 Redux를 쓸 필요가 있나 생각하긴 했는데
채용공고고 뭐고 다 Redux가 써져 있어서 배워야 하나 생각했다.

그런데 친구랑 프로젝트를 하는데 Redux를 쓰자고 해서
결국 Redux를 시작하게 되었다.

두둥탁

---

공식 문서를 읽어보자

역시 새로운걸 배울 때는 공식 문서랑 튜토리얼을 보고 하는게 최고다.
물론 친구가 짜놓은 코드가 있기 때문에 보고 어영부영 할 수도 있겠지만,
정확하게 알고 짜는게 중요한 법이다

Quick Start | Redux

---

React + Redux 프로젝트 생성

일단 NPX를 이용해서 프로젝트를 만들어보자.
NPX에서는 Redux 템플릿을 지원해준다.

npx create-react-app 프로젝트_이름 --template redux

만약 이미 프로젝트가 있다면, 다음의 패키지를 설치해주자

npm install @reduxjs/toolkit react-redux

- @reduxjs/toolkit: Redux를 기반으로 여러 유틸리티를 제공하는 툴킷
- react-redux: Redux 패키지

---

Redux를 언제 사용하면 좋은가?

Redux Essentials, Part 1: Redux Overview and Concepts | Redux

튜토리얼에 따르면 다음에 경우에 사용하면 좋다고 한다.

- 어플리케이션에 많은 state가 필요할 때
- state가 자주 업데이트 될 때
- state를 업데이트하는 로직이 복잡할 때
- 많은 사람들이 함께 작업하는 중, 대규모 코드일 때

나도 기존에 Context를 사용했는데 왜 redux가 필요하지 싶었다.
아마도 내가 만들던 프로젝트들이 소규모라서 그랬을 것 같다.

---

용어 정리

- State: 상태값. 앱 내부에서 변경되는 값들
- Action: 이벤트가 발생했을 때 state를 변경하는 코드
- View: 현재 state에 따라 정의된 UI
- Reducer: 현재 state와 action에 따라서 어떻게 업데이트할것인지 결정하는 함수
- Store: state를 저장하는 저장소
- Dispatch: State를 업데이트 할 수 있는 유일한 방법
- Selectors: Store의 state에서 원하는 내용을 골라내는 함수. 
(예를 들어 a오브젝트의 b변수만 가져오고 싶다)

---

결국 리덕스는...

튜토리얼을 다 읽어보고 나서 대충 잡힌 개념은 다음과 같다.

Context의 액션 버전

뭔가 열심히 설명을 읽어봤지만 결국 Context처럼 State를 최상단에서 관리하고,
자식에게 내려보내주는 패턴이었다.
(이걸 One-Way data flow라고 한다)

단지 핵심적인 차이가 있다면 Context는 기존 state를 상단에서 내려주기만 하는,
어찌보면 전역 state였다면
Redux는 '액션'을 통해 state를 관리한다는 점이다.
그렇기 때문에 임의로 illegal한 값을 넣기 힘들다는 것이다.

---

Redux 데이터 플로우

Redux Essentials, Part 1: Redux Overview and Concepts | Redux

초기 설정

- Redux 스토어를 루트 리듀서를 이용해 생성한다.
- Store가 root reducer를 한번 호출하면, 초기 state값을 저장한다.
- UI가 렌더링할 때 현재 state값을 조회한다.

업데이트

- 무언가 일이 발생한다 (버튼 클릭등 이벤트)
- Redux 스토어에 액션을 dispatch한다.
- 스토어는 리듀서를 통해 이전값과 현재 값을 이용해서 새로운 값을 도출한다.
- 스토어는 UI에 값이 변경되었다고 통지한다.
- UI 컴포넌트는 store의 값을 새로 조회하여 다시 출력한다.

이야 개잘만들었네

---

몇가지 팁들

- Action의 type은 'domain/eventName'의 형식으로 설정하도록 하자