이번 리액트 숙련 과정 과제 작업에 앞서 '리덕스' 라는 것에 대한 개념 이해가 필요하여 강의를 수강 중인데, 그냥 보는 것 보다 typing하면서 정리하는게 좋을 것 같아 포스팅 해보려고 한다.
리덕스란?
- 리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주는 상태관리 라이브러리.
- 전역 상태관리를 편히 할 수 있게 해주는 것이다.
상태관리 흐름
- 스토어: 데이터 저장소
- 리듀서: 리덕스에 저장된 상태(=데이터)를 변경(수정)하는 곳
- 액션: 가지고 있는 데이터를 변경할 때 발생하는 것 (데이터를 바꿔주는 것을 '액션을 디스패치한다' 라고 표현한다.)
- 디스패치: 액션을 발생시키는 역할 (요청하는 것)
- 구독: 각 컴포넌트가 스토어로부터 데이터를 받아오는 것
- 작동 과정
- (1) 리덕스 Store를 Component에 연결한다.
- (2) Component에서 상태 변화가 필요할 때 Action을 부른다.
- (3) Reducer를 통해서 새로운 상태 값을 만들고,
- (4) 새 상태값을 Store에 저장한다.
- (5) Component는 새로운 상태값을 받아온다. (props를 통해 받아오므로 재 랜더링 된다.)
리덕스의 3가지 특징
- store는 1개만 쓴다(단일 스토어)
- store의 state(데이터)는 오직 action으로만 변경 가능.
- state는 setState()나, useState() 훅을 써서만 변경 가능했던 것 처럼 데이터가 마구잡이로 변하지 않게 하기 위함이다.
- 어떤 요청이 와도 리듀서는 같은 동작을 해야한다.
- 같은 값을 넣으면 항상 같은 값이 나와야 함(예: parameter로 1을 넘기면 3을 return해주는 함수를 만들었을 때: 1을 넣으면 항상 3이 나와야 함.)
- 파라미터로 받아온 값 외에는 아무것도 참조하지 않아야 함.
- 이전 상태는 수정하지 않는다(새로운 state를 반환하는 것만 가능)
