상세 컨텐츠

본문 제목

리덕스의 3가지 규칙

Web/React

by Yongari 2023. 1. 22. 22:17

본문

 

리덕스 프로젝트에서 사용하게 될 때 꼭 지켜야하는 3가지 규칙

 

 

1. 하나의 애플리케이션 안에는 하나의 스토어가 있다.

여러개의 스토어를 사용하는 것은 가능하지만 권장되지 않는다. 그러나 이럴 경우 개발도구를 활용하지 못합니다.

 

 

2. 상태는 읽기전용이다.

 

리액트에서 상태 업데이트를 할 때 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 하는데

리덕스도 마찬가지로 기존상태는 건드리지 않고 새로운 상태를 생성해서 업데이트하면 나중에 개발자 도구를 통해 앞이나 뒤로 돌릴 수 있다.  리덕스에서 불변성을 유지해야하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 shallow equality 검사(React-Redux는 shallow equality를 사용하여 래핑하는 구성요소를 다시 렌더링해야하는지 여부를 결정함 이 때 래핑된 요소가 순수하다고 가정함)를 하기 때문이다.  이를 통하여 객체의 변화를 감지할 때 얕게 비교를 하기 때문에 좋은 성능을 유지하는 것이다. 

 

shallow equality 검사 : 참고 링크

 

3. 변화를 일으키는 함수, 리듀서는 순수함수여야합니다.

 

순수함수라는 개념이 익숙하지 않아도 다음사항을 체크해야함 

(순수함수 : 항상 같은 입력을 하면 출력도 같은 출력만 나와야함) - 링크

 

 

  • 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받는다. 
  • 이전의 상태는 절대 건드리지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환합니다. 
  • 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야만 합니다.

 

위 3가지를 주의하셔야 하며 순수함수는 동일한 인풋이면 언제나 동일한 아웃풋을 만들어야합니다. 다음의 예는 순수함수가 아닙니다.

  • New Date() 호출할 때마다 새로운 날짜 생성
  • 랜덤숫자를 생성하는 함수
  • 네트워크에 요청을 하는 함수 

관련글 더보기