😡 Redux의 필요성을 느꼈던 경험
암만 봐도 너무 어려웠던 Redux..전에는 리액트조차 아예 노베인 상태였어서 시간상 리덕스까지 배워서 바로 졸업프로젝트에 적용하기엔 무리였다. 그 후에 프로젝트를 할 때에도 계속 학기중인데다 시험기간까지 겹쳐서 도저히 배울 시간이 안나 적용을 못한 채로 진행했었는데, redux없이 프로젝트를 하다보니 확실히 상태 관리의 필요성을 느꼈다.
바로 이 그림의 문제였다. props를 이용해 데이터를 전달했더니 점점 페이지 depth가 깊어질수록 state,props가 변할 때마다 그걸 상위/하위 컴포넌트에서 처리하는 코드가 줄줄히 늘어났다. 그러다보니 디버깅을 할때나 어떤 부분을 고칠 때 문제가 안생기나 여기저기 다 확인해야 해서 너무 번거로웠다. 그게 프로젝트 끝난 이후에도 맘에 남아서 무조건 방학에 리덕스 공부하고 리팩토링 해야지 다짐했다가 이번에 방학을 하자마자 Redux 영상을 엄청 찾아봤고, 드디어 좀 이해한 내용들을 정리하고 넘어가야겠다.
redux 흐름을 정리한 이미지
(출처:생활코딩 redux 강의 내용)
redux의 실행 흐름
- View에서 어떤 특정 행동이 있었을 때, action은 해당 행동에 대한 내용을 객체 형태로 dispatch에 전달한다.
- dispatch는 이를 reducer로 전달한다.
- reducer는 전달받은 action에 따라 새로운 state 객체를 반환한다.
- getState는 이 새로운 state를 받아 렌더링할 화면으로 전달한다.
- 새로운 state가 반영된 화면이 출력된다.
Redux란?
Redux는 state를 효율적으로 관리해주는 React의 Library로, 각 Component별 state를 분리시켜 효율적으로 작업 및 관리할 수 있다. 이전 Project까진 Main Component에 state를 생성하여 자식 Component와 연결한 후, Component별로 전달하고 전달하여 사용하였다. 그러나 Redux를 사용하면 연결된 Component사이에서 옮길필요없이 state를 전달 할 수 있다.
출처: https://aridom.tistory.com/37
.png)
Redux의 3가지 원칙
1. 애플리케이션의 모든 State는 하나의 Store 안에 하나의 객체 트리 구조로 저장
- universal application(하나의 코드 베이스로 다양한 환경에서 실행 가능한 코드) 구현이 용이해진다.
- 하나의 상태 트리만 가져서 디버깅에도 용이 + 실행취소(undo)/다시실행(redo) 기능도 구현이 쉬워짐.
2. State는 읽기 전용! : State를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 Action 객체를 전달하는 방법 뿐이다.
- 모든 State 변화는 중앙에서 관리되며, 뷰나 네트워크 콜백에서 상태를 직접 바꿀 수 없다.
- action은 평범한 객체, 따라서 기록을 남길 수 있고 이후에 테스트나 디버깅을 위해 재현도 가능
3. 변화는 순수 함수로 작성되어야한다. : Action에 의해 State 트리가 어떻게 변화하는 지를 지정하기 위해 프로그래머는 순수 Reducer를 작성해야한다.
- reducer는 그저 이전 상태와 액션을 받아 다음 상태를 반환하는 순수 함수이다.
- 이전 상태를 변경하는 대신 새로운 상태 객체를 생성해서 반환해야한다.
- 애플리케이션이 성장해나가면 상태 트리의 특정한 부분들을 조작하는 더 작은 reducer들로 나누는 것도 가능하다.
- 함수이기 때문에 호출되는 순서를 정하거나 추가적인 데이터를 넘길 수도 있다. 페이지네이션과 같이 일반적인 재사용 가능한 리듀서를 작성하는 것도 가능하다.
주요 개념들
store : store에는 관리할 모든 state들이 들어간다.
state : state(상태)가 저장되는 곳. 직접 접근해 변경 불가능하고 값을 읽는 것만 가능.
reducer : 새로운 state를 return해주는 함수, 우리가 만들어줘야 하는 부분
action : 이벤트가 실행되면 dispatch에 전달해줄 action에 대한 내용을 담은 객체
dispatch : state값을 변경한다. action 객체를 담고,이 action과 현재의 state값을 reducer로 전달.
getState : state값을 가져온다.
subscribe : state값이 변경되었을 때 구동 될 함수들을 저장.
store.subscribe(render) // state가 변할때마다 render가 호출된다.render : state값을 참조하여 ui를 만들어주는 코드
