리덕스가 뭐고?
리덕스는 왜 필요할까 ??
React에서는 상태와 속성(props)을 이용한 컴포넌트 단위 개발 아키텍처를 배웟다.
리덕스에서는 컴포넌트와 상태를 분리하는 패턴을 배운다.
앞서 리덕스를 사용하기 전에는
동작,상태를 다루기위해서 상태변경로직이 복잡하기 얽혀있는경우 (스테이트끌어올리기등등..)가 많았다.
리덕스를 통해서 보다 단순한 함수 컴포넌트를 만들수 있게될거다.
무언거 구현하기보다
원리구조, 설계를 알아가는데 포커스를 맞추자.
리덕스에 대한 대표적인 오해중 하나가, Redux는 React의 관련 라이브러리 혹은 하위 라이브러리로 오해하는데, 전혀 그렇지않다. Redux는 React없이도 사용할 수 있는, 상태관련 라이브러리이다.
Redux의 정의
홈페이지의 정의 :
리덕스는 자바스크립트 앱에서 예측가능한 상태관리를 해주는 컨테이너
this.state -> 리액트의 스테이트는 각 컴포넌트 내에서 관리한다.
각 컴포넌트에서 정보공유를 해주기위해서는 props , state끌어올리기등등..
구조가 단순하면 괜찮지만
컴포넌트가 많다면 상태들이 무지하게 많아진다. (거쳐야할 컴포넌트(자식)들이 많아진다.)
그래서 리덕스를 쓰면좋다.
Redux의 3가지 원칙
- Single source of truth
동일한 데이터는 항상 같은곳에서 데이터를 가져온다. 즉 데이터를 저장하는 store라는 하나의 공간이 존재한다. - State is read-only
리액트에서 스테이트를 변경하기위해서 setState라는 메소드를 써야했다, Redux에서는 Action이라는 객체를 통해서 스테이트를 변경할수있다. - Changes are made with pure functions
변경은 순수함수로만 가능하다. -> Reducer와 연결되는 내용이다.
Store
상태가 관리되는 오직 하나의 공간
각 state정보를 스토어 에서 가져올수있다.
Action
자바스크립트 객체이다, 객체안에 type을 비롯한 다양한 데이터들이 담긴다.
액션 개체는 store에게 나의 app의 데이터를 운반해주는 역할을한다.
(실제 생김새를보면 약간 이벤트 에미터같은느낌 ㅇㅇ)
Reducer
Action을 통해서 나의 App의 데이터를 스토어에 운반한다. 그과정에서 Reducer를 거쳐서 가야한다.
Action - Dispatch -> Reducer -> Store(New State)
Action객체는 Dispatch에게 전달되고,
Dispatch는 Reducer를 호출해서 새로운 state를 생성한다.
Redux의 흐름
브라우저에서 이벤트발생 -> 디스페치의 전달인자로 Action객체를 담아서 Reducer로 전달이된다.
Reducer는 Action객체의 type에 따라서 다른 동작을 수행한다. 동작의 수행결과로 새로운 state가 반환이된다.
리덕스에서 이 개념을 connect할수있는방법은 두가지가있다.
- mapstatetoprops
- redux hooks // 좀더 직관적이고 최근에 나온 방법이므로 이것을 사용할것이다.
Redux의 장점
- 상태를 예측가능하게 만들어준다.
- 유지보수
- 디버깅에 유리하다 (Action과 state log기록 시)
- 테스트를 붙이기 쉽다.
Redux DevTool -> 구글 크롬 용이하다.
middleware
리덕스에도 결국 미들웨어들을 붙여서 사용해야한다.
주로 사용하는것이라고 칭하기는좀 그렇지만..
thunk ( 비동기처리때문에 사용함 )
logger ( 말그대로 로거 )
사용하고싶다면
createStore의 두번째인자이상 으로 넣어주면된다.
aaplymiddleware 라는 객체도 사용해야한다.
로거는 왠만하면 뒷단에 물리자.
