(Redux) 리덕스의 3가지 규칙

호두파파·2021년 5월 4일
0

Redux

목록 보기
5/6

리덕스 프로젝트에서 사용하게 될때 알아두고 꼭 지켜야 할 3가지 규칙이 있다.

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

하나의 어플리케이션에선 단 한개의 스토어를 만들어서 사용한다. 여러개의 스토어를 사용하는 것은 사실 가능하기느 하나, 권장되지 않는다. 특정 업데이트가 너무 빈번하게 일어나거나, 어플리케이션의 특정 부분을 완전히 분리시키게 될 때 여러개의 스토어를 만들 수도 있다. 하지만 그렇게 진행한다면, 개발 도구를 활용하지 못하게 된다.

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

리액트에서 state를 업데이트 해야 할 때, setState를 사용하고, 배열을 업데이트 해야 할 때는 배열 자체에 push를 직접 하지 않고, concat같은 함수를 사용해 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 한다. 엄청 깊은 구조로 되어 있는 객체를 업데이트를 할 때도 마찬가지로, 기존의 객체는 건드리지 않고 Object.assign을 사용하거나 spread 연산자(...)를 사용해 업데이트 하곤 한다.

리덕스에서도 마찬가지이다. 기존의 상태는 건들이지 않고 새로운 상태를 생성해 업데이트 해주는 방식으로 해주면, 나중에 개발자 도그를 통해서 뒤로 돌릴 수도 있고 다시 앞으로 돌릴 수도 있다.

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

참고로 읽어보기
리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기

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

순수한 함수, 라는 개념이 익숙하지 않다면 다음을 기억하자

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

3가지 사항을 주의하자. 동일한 인풋이라면 언제나 동일한 아웃풋이 있어야 한다. 그런데 일부 로직들 중에서 실행할 때마다 다른 결과값이 나타날 수있다. new Data()를 사용한다던지.. 랜덤 숫자를 생성한다던지.. 혹은, 네트워크에 요청을 한다던지! 그러한 작업은 결코 순수하지 않은 작업이므로, 리듀서 함수의 바깥에서 처리해줘야 한다. 이를 위해 리덕스 미들웨어를 사용한다.


출처

원문보기

profile
안녕하세요 주니어 프론트엔드 개발자 양윤성입니다.

0개의 댓글