본문 바로가기

FrontEnd/React

간단한 리덕스의 세 가지 규칙

더보기

리덕스 공부하며 요약한 세 가지 규칙을 작성 해본다.

 

1. 단일 스토어

하나의 프로젝트 안에는 하나의 스토어만 존재.

- 하나의 프로젝트 안에 여러 스토어를 만들 수도 있지만, 상태 관리가 복잡해질 수 있으므로 권장 X

 

2. 읽기 전용 상태 - Read only

 리덕스의 상태는 read-only 임. 따라서 업데이트하는 과정에서 불변성을 지켜 주기 위해 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 함

 - ex.) spread 연산자 or immer library

리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교(shallow equality) 검사를 하기 때문. 객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 겉핥기 식으로 비교하여 좋은 성능을 유지 함.

 

3. 리듀서는 순수한 함수

- state 변화를 일으키는 리듀서 함수는 순수 함수여야 함

- 순수 함수 ?

  1. 전달 받는 parameter 수가 정해져 있음
    • 즉, 리듀서 함수는 이전 상태와 액션 객체를 parameter로 받음
  2. parameter 외의 값에는 의존하면 안 됨.
  3. 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환
    • spread 연산자 혹은 immer library 같은 방법을 사용해, 새로운 주소값을 가진 객체를 만들어서 반환
  4. 똑같은 parameter로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환
리듀서 참고 이미지

리듀서를 작성할 때는 위 네가지 사항을 주의. 예를 들어 리듀서 함수 내부에서 랜덤 값 생성 하거나, Date 함수를 통해 현재 시각 값을 가져오거나, 네트워크 요청을 한다면 같은 parameter 값을 넘겨 받더라도 리턴되는 값이 상이 하기 때문에, 이와 같은 내용은 작성되면 안됨. 따라서 이 같은 처리는 액션 쪽이나 미들웨어를 통해 관리.