[Redux] 리덕스 개념, 작동방식

1. Redux

자바스크립트로 만든 앱을 위한 예측 가능한 상태 저장소

 

복잡성을 낮춰서 예측 가능하게 해줌

모든 데이터를 state에 넣어 관리하면서 복잡성을 낮춘다.

(...라고 하는데 다른 상태 관리 라이브러리보다 훨씬 더 복잡한 것 같다;;)

 

2. store 개념

state는 함부로 접근할 수 없고, store에 저장되어 있음

(마치 우리가 은행에 돈을 넣어두는 것처럼)

 

state를 가져오는 것, 변경하는 것, 구독하는 것 모두 store를 통해서 이루어짐

store의 getstate, dispatch, subscribe 이용

 

getstate를 통해 store에 저장된 state를 가져옴

dispatch와 reducer를 통해 state를 변경함

subscribe를 통해 state가 바뀔 때마다 state를 사용하는 곳에 알려줌

 

const store = Redux.createStore(reducer)

store는 Redux.createStore()를 통해서 생성

reducer를 인자로 넣어줌, reducer는 state를 가공시키는 함수로 내가 직접 만들어야함

 

3. 예시

회원가입 폼이 있다고 가정하자.

입력 후 submit 버튼을 누르면 action 이라는 객체가 dispatch에게 전송된다.

dispatch 안에 객체 {} 가 바로 action

 

dispatch는 2가지 일을 한다.

 

1. reducer를 호출해서 state를 바꾼다.

- reducer는 현재 state와 action을 받아 이를 가공하여 새로운 state를 return 한다.

 

2. subscribe를 통해 render를 호출하여 ui를 업데이트한다.

- 새로운 state를 반영하여 ui가 변경된다.

 

4. Redux를 사용하는 이유, Redux 작동방식 등 (내가 이해한대로 써봄)

Redux를 사용하지 않을 때는 컴포넌트를 추가, 수정, 삭제 등을 할 때 서로 연결되어 있는 컴포넌트들을 일일이 수정해야 함.

앱이 복잡해지고 유지보수가 어려워짐.

 

Redux를 사용하여 중앙 store에서 state를 관리하면, state가 바뀔 때마다 각 컴포넌트를 일일이 수정할 필요가 없음.

 

state가 바뀌면 변경사항을(action) dispatch에게 통보하고,

변경된 내용을 업데이트 받기로 store에 subscribe만 해두면 됨.

 

state에 변경사항이 발생하면(dispatch에게 action이 전달됨) dispatch는 reducer를 호출하고(reducer에게 state와 action이 전달됨) reducer는 state를 가공하여 새로운 state를 return함. dispatch는 subscribe를 통해 변경사항을 업데이트 받기로 한 컴포넌트에게 이를 알림.

 

각 컴포넌트들은 자신의 변경사항을 다른 컴포넌트들에게 일일이 알릴 필요없이 store에다가만 알리면 됨.

각 컴포넌트들 간의 의존성, 복잡성이 낮아지고 독립성이 보장됨.

각 컴포넌트들은 다른 컴포넌트들을 신경쓸 필요 없이 자신의 역할(비즈니스 로직)만 잘 수행하면 됨.

 

 

 

출처: 생활코딩

https://youtu.be/8EhmwDKSeJQ

https://youtu.be/SnND3Fj3eJc  -> 댓글 참조