1. Redux란?
Redux란 상태 관리 JavaScript 라이브러리이다.(여기서 관리하는 상태(State)란 간단하게 말해 Component 내부에서 사용하는 데이터라고 할 수 있다.) Redux를 사용하게 되면 Component의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 할 수 있게 된다.
2. 그럼 왜 Redux를 쓰는가?
React를 사용한다면 상태관리를 위해 useState Hook을 사용해 본적이 있을 것이다. 그런데 useState Hook은 여러 컨포넌트에서 같은 State를 사용하려면 부모 자식 컴포넌트를 거처야 하는데 Redux를 사용한다면 state를 중앙에서 관리해 원하는 컴포넌트를 바로 가져와서 사용할 수 있게 된다.
3. Redux 용어
- State : Redux에서 저장하고 있는 상태값, Key : Value 형태로 보관한다.
- Action : 상태에 변화가 필요할 때(가지고 있는 데이터를 변경할 때) 발생하는 것.
- Action Creator : 액션 생성 함수, 액션을 만들기 위해 사용한다.
- Reducer : Redux에 저장된 상태를 변경하는 함수.
- Store : 리듀서, 현재 App 상태 등을 저장하는 장소.
- dispatch : Store의 내장함수 액션을 발생시키는 역할.
- Subscribe : Action이 dispatch 될 때마다 전달해준 함수를 호출.
- Middleware : Action을 dispatch 했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행
4. Redux의 상태 관리 흐름
4.1 middleware가 없을 때
1. 리덕스 Store를 Component에 연결한다.
2. Component에서 상태 변화가 필요할 때 Action을 부른다.
3. Reducer를 통해서 새로운 상태 값을 만든다.
4. 새 상태값을 Store에 저장한다.
5. Component는 새로운 상태값을 받아온다.
4.2 middleware가 있을 때
1. View에서 Action을 부른다.
2. dispatch에서 Action이 일어난다,
3. Action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다.
4. middleware 에서 명령내린 일을 수행하고 난뒤, reducer 함수를 실행한다.
5. reducer의 실행결과를 store에 새로운 값으로 저장한다.
6. store의 state에 subscribe하고 있던 UI에 변경된 값을 준다.
4. Redux의 특징
1. 단일 Store 규칙을 따른다.
- 한 프로젝트에 Store는 하나만 존재해야 한다.
2. Store의 States는 오직 Action으로만 변경할 수 있다.
- 데이터가 마구잡이로 변하지 않도록 불변성을 유지해주기 위함이며 Redux의 저장된 데이터는 읽기 전용이고 오직 Action으로만 가능한데 Action은 수정하는 것이 아닌 새로운 값을 만들어 State를 변경한다.
3. 어떤 요청이 와도 Reducer는 같은 동작을 실행해야 한다.
- Reducer는 순수한 함수여야 한다.
- 파라미터 외의 값에 의존하지 않고 이전 상태는 수정하지 않는다.
- 파라미터가 같다면, 항상 같은 값을 반환해야야 한다.
- Reducer는 이전 상태와 Action을 파라미터로 받는다.
5. 참조
스파르타 코딩클럽 리액트 기초반 3주차 강의자료
