더보기
리덕스 공부하며 요약한 세 가지 규칙을 작성 해본다.
1. 단일 스토어
하나의 프로젝트 안에는 하나의 스토어만 존재.
- 하나의 프로젝트 안에 여러 스토어를 만들 수도 있지만, 상태 관리가 복잡해질 수 있으므로 권장 X
2. 읽기 전용 상태 - Read only
리덕스의 상태는 read-only 임. 따라서 업데이트하는 과정에서 불변성을 지켜 주기 위해 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 함
- ex.) spread 연산자 or immer library
리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교(shallow equality) 검사를 하기 때문. 객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 겉핥기 식으로 비교하여 좋은 성능을 유지 함.
3. 리듀서는 순수한 함수
- state 변화를 일으키는 리듀서 함수는 순수 함수여야 함
- 순수 함수 ?
- 전달 받는 parameter 수가 정해져 있음
- 즉, 리듀서 함수는 이전 상태와 액션 객체를 parameter로 받음
- parameter 외의 값에는 의존하면 안 됨.
- 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환
- spread 연산자 혹은 immer library 같은 방법을 사용해, 새로운 주소값을 가진 객체를 만들어서 반환
- 똑같은 parameter로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환
리듀서 참고 이미지
리듀서를 작성할 때는 위 네가지 사항을 주의. 예를 들어 리듀서 함수 내부에서 랜덤 값 생성 하거나, Date 함수를 통해 현재 시각 값을 가져오거나, 네트워크 요청을 한다면 같은 parameter 값을 넘겨 받더라도 리턴되는 값이 상이 하기 때문에, 이와 같은 내용은 작성되면 안됨. 따라서 이 같은 처리는 액션 쪽이나 미들웨어를 통해 관리.
'FrontEnd > React' 카테고리의 다른 글
왜 리액트 훅 선언은 특정 규칙이 있을까? (0) | 2023.09.19 |
---|---|
MobX vs Redux Toolkit (0) | 2023.09.19 |
JSX 문법에서 왜 여러 Element 들은 하나의 최상위 element에 감싸져 랜더 되어야 하는건가? (0) | 2023.01.16 |
VScode 에서 코드 save 할 때마다 prettier 동작 (0) | 2022.06.29 |
Implement multiple styles into the inner style prop (0) | 2022.06.26 |