#Redux
*Redux란 무엇인가?
- 공식 문서상에서는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 라고 나와있다.
- 즉, 상태(state)를 관리해주는 라이브러리이다.
- 착각하면 안되는게 Redux가 React에 속한 것이 아니며, React만 지원하는 것이 아닌 Angular,jQuery, vanila 자바스크립트 등 다양한 곳에서 쓰일 수 있다.
그렇다면 왜 많은 사람들이 React Redux라고 하는가?
- React의 상태(state)를 맨 마지막 자식 컴포넌트에서 부모 컴포넌트로 올리기까지 같은 props가 반복적으로 사용되고 프로젝트가 커지고 파일 갯수가 늘어나면 관리하기가 어려워지기 때문이다.
- Redux는 하나의 store(상태 관리하는 장소)를 만들어 놓고 원하는 곳(꼭 자식 컴포넌트를 거쳐 올라가지 않아도 됨)에 직접 전달해주는 기능을 가지고 있기 때문에 React에서 활용도가 매우 높다.
Redux 특징
- Single source of truth
*하나의 어플리케이션 안에는 단 하나의 store를 만들어서 사용한다.
- 특정 업데이트가 빈번하게 일어나거나, 어플리케이션의 특정 부분을 완전히 분리시킬 때 여러 개의 스토어를 만들 수 있다.
- 하지만 그렇게 하면 개발 도구를 활용하지 못한다.
- State is read-only
-
React에서 state를 업데이트해야 할 때 setState를 사용하고, 배열을 업데이트 해야 할 때 배열 자체에 push 를 직접 하지 않고 concat을 사용하여 기존 배열을 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 한다.
-
객체를 업데이트를 할 때도 마찬가지로, 기존의 객체는 건드리지 않고, Object.assign 을 사용하거나 spread 연산자 (…)을 사용하여 업데이트 한다.
-
Redux에서도 마찬가지로 기존의 상태는 건드리지 않고 새로운 상태를 생성하여 업데이트해주는 방식인 action 을 이용하면 나중에 개발자 도구를 통해서 뒤로 돌릴 수도 있고 다시 앞으로 돌릴 수도 있다.
-
Redux에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 shallow equality checking로 하기 때문이다.
-
객체의 변화를 감지할 때 겉핥기식으로 비교를 하는 이유는 객체의 속성으로 비교 시 시간복잡도가 O(n)이지만 주소값으로 비교 시 시간 복잡도는 O(1)이 되어 좋은 성능을 유지할 수 있다.
- Changes are made with pure functions
변화를 일으키는 함수인 리듀서는 순수 함수여야 한다.
리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받습니다.
이전의 상태는 절대로 건드리지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환합니다.
똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야만 합니다.
순수하지 않은 작업
실행할 때마다 다른 결과값이 나타나는 경우
new Date() 사용
Math.random() 사용
API 요청
