Redux
리액트로 컴포넌트 단위 개발을 하다보면, 유저의 인터랙션에 따라 변할 수 있는 부분 즉, State(상태)를 변경하고 관리하는 일이 매우 중요하다는 것을 알 수 있게 된다.
하지만 컴포넌트의 State와 props를 다루기 위한 과정에서 로직이 복잡하게 얽히는 경우가 생기는데, 특히 유기적으로 변화해햐하는 형제 컴포넌트에서의 상태 변경을 위해 상위 공통 부모 컴포넌트로 거슬러 올라가야하는 경우에 그 사이를 연결하는 중간 단계(?)의 컴포넌트들은 계속해서 props를 내려주어야하는 상황에 놓인다. 해당 컴포넌트에 직접적으로 필요한 요소가 아님에도 불구하고, 코드를 작성해 넣어야한다. 이는 소모적이며 이후 코드를 수정하기에도 매우 복잡한 일이 된다.
리덕스는 이런 상태관리에 도움을 주는 라이브러리다. 리액트 없이도 사용가능하며, 다음과 같은 원칙을 따른다.
Single source of truth
동일한 데이터는 항상 같은 곳 = store 에서 가지고 온다.
store : 상태가 관리되는 오직 하나의 공간
State is read-only
리액트에서 setState 메소드로만 state를 변경할 수 있었던 것처럼, 리덕스에서는 action 객체를 통해서 state를 변경할 수 있다. action객체는 store에 데이터를 운반해주는 역할을 한다.
Changes are made with pure functions
action객체는 Dispatch 메소드에 전달이 되고, Dispatch는 Reducer함수를 호출해 새로운 state를 생성한다. 이 Reducer 함수는 순수함수로써 동작하며, 어떤 결과값이 나올지 다음을 예측할 수 있게 해준다.
Redux의 장점
- 상태를 예측 가능하게 해준다. - 리듀서
- 유지보수가 용이하다.
- 리액트 개발에서 버그가 나면 props를 내려받기 위해 거치는 모든 경로를 수정해주어야하지만, 리덕스에서는 store로 접근해 데이터를 받아올 수 있기 때문에 유지보수가 편리해진다.
- 디버깅에 유리하다.
- action과 state에 로그를 기록하면 추적을 할 수 있다. redux dev tool의 타임트래블 기능이 있어 눈으로 직접 확인이 가능하다.
- 테스트가 용이하다. - 리듀서
위에 정리한 개념을 바탕으로 실제 코드 작성을 연습해본 후에 더 구체적으로 블로깅할 예정.
