Web/React
리덕스의 3가지 규칙
Yongari
2023. 1. 22. 22:17
리덕스 프로젝트에서 사용하게 될 때 꼭 지켜야하는 3가지 규칙
1. 하나의 애플리케이션 안에는 하나의 스토어가 있다.
여러개의 스토어를 사용하는 것은 가능하지만 권장되지 않는다. 그러나 이럴 경우 개발도구를 활용하지 못합니다.
2. 상태는 읽기전용이다.
리액트에서 상태 업데이트를 할 때 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 하는데
리덕스도 마찬가지로 기존상태는 건드리지 않고 새로운 상태를 생성해서 업데이트하면 나중에 개발자 도구를 통해 앞이나 뒤로 돌릴 수 있다. 리덕스에서 불변성을 유지해야하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 shallow equality 검사(React-Redux는 shallow equality를 사용하여 래핑하는 구성요소를 다시 렌더링해야하는지 여부를 결정함 이 때 래핑된 요소가 순수하다고 가정함)를 하기 때문이다. 이를 통하여 객체의 변화를 감지할 때 얕게 비교를 하기 때문에 좋은 성능을 유지하는 것이다.
shallow equality 검사 : 참고 링크
3. 변화를 일으키는 함수, 리듀서는 순수함수여야합니다.
순수함수라는 개념이 익숙하지 않아도 다음사항을 체크해야함
(순수함수 : 항상 같은 입력을 하면 출력도 같은 출력만 나와야함) - 링크
- 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받는다.
- 이전의 상태는 절대 건드리지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환합니다.
- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야만 합니다.
위 3가지를 주의하셔야 하며 순수함수는 동일한 인풋이면 언제나 동일한 아웃풋을 만들어야합니다. 다음의 예는 순수함수가 아닙니다.
- New Date() 호출할 때마다 새로운 날짜 생성
- 랜덤숫자를 생성하는 함수
- 네트워크에 요청을 하는 함수