[부스터코스/웹 프론트엔드 시작하기 (리액트&리덕스)] 리덕스란?

리덕스는 애플리케이션의 복잡도를 획기적으로 줄여주는 도구이다.

리덕스는 하나의 객체 안에 애플리케이션이 필요로 하는 데이터를 모아둠으로써 코드 복잡도를 낮춰준다.

 

또한, 이렇게 데이터를 모아둔 하나의 객체를 직접 접근하여 사용하지 못하도록 막아 은닉성을 보장한다.

추가적으로 객체 각각의 상태 변화가 서로 영향을 전혀 주지 않는 독립된 상태를 유지할 수 있기 때문에 UNDO, REDO와 같이 애플리케이션의 상태를 바꾸는 것을 매우 쉽게 처리할 수 있다.

 

리덕스의 핵심은 store이다. store는 정보가 저장되는 곳으로 내부에는 state라는 정보가 저장된다.

이때 store의 state에 대한 접근은 금지되어 있다.

출처 - 부스트코스 강의 (리덕스 여행의 지도 - state와 render의 관계) 영상 내 이미지

 

이 store를 만들 때 가장 먼저 해야 하는 것은 reducer라는 함수를 만들어 공급하는 것이다.

출처 - 부스트코스 강의 (리덕스 여행의 지도 - state와 render의 관계)

위 이미지 우측 상단처럼 reducer 함수를 만들어 Redux.createStore(reducer); 코드로 store를 만들 수 있다.

 

출처 - 부스트코스 강의 (리덕스 여행의 지도 - state와 render의 관계) 영상 내 이미지

render 함수는 store 바깥에 위치하며 UI를 렌더링해주는 우리가 작성해야할 코드이다.

우리는 store에 있는 state를 직접 접근하여 사용할 수 없기 때문에 store 내부에 이 값에 접근할 수 있도록 함수들이 준비되어 있다.

 

출처 - 부스트코스 강의 (리덕스 여행의 지도 - state와 render의 관계)

 

출처 - 부스트코스 강의 (리덕스 여행의 지도 - state와 render의 관계)

getState 함수는 store 내부의 state의 값을 가져와 render 함수에 전달해준다. 그러면 render는 받아온 state 값을 사용해 화면에 UI를 렌더링한다.

 

subscribe 함수는 store 내부의 state 값이 바뀔 때마다 render 함수를 수동으로 호출하지 않도록, state 값이 바뀌면 자동으로 render 함수를 호출하도록 해준다.

render 함수를 subscribe에 등록할 때는 store.subscribe(render) 와 같은 형식으로 코드를 작성하면 된다.

 

dispatch 함수는 두 가지 역할을 한다. 첫번째 역할은 reducer를 호출해서 state 값을 변경하도록 하고, 두번째 역할로 subscribe를 이용해서 render 함수를 호출한다.

출처 - 부스트코스 강의 (리덕스 여행의 지도 - action과 reducer)

출처 - 부스트코스 강의 (리덕스 여행의 지도 - action과 reducer)

위 이미지에서 submit 버튼을 누르면 onsubmit이라는 이벤트가 발생하고, store의 dispatch에게 action이라는 객체를 하나 전송한다.

 

출처 - 부스트코스 강의 (리덕스 여행의 지도 - action과 reducer)

dispatch가 reducer를 호출할 때 현재의 state 값과 action data를 전달한다.

위 이미지의 reducer 코드는 인수로 dispatch를 통해 state와 action 데이터 값을 전달받는다.

action 데이터의 타입이 "create"라면 reducer 내부의 if문이 동작하게 된다.

최종적으로 반환하는 객체는 state의 새로운 값이 된다.

즉, reducer는 state를 입력받고 action을 참조해서 새로운 state 값을 만들어 반환하는 역할을 한다.

 

출처 - 부스트코스 강의 (리덕스 여행의 지도 - action과 reducer)

이렇게 state 값이 변경되면 dispatch가 subscribe에 등록되어 있는 함수들을 모두 호출한다.

그 결과 render 함수가 getState를 통해 state를 가져오고, 화면을 갱신해주면서 새로운 state 값에 맞게 UI가 바뀌는 것이다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web231/lecture/1387447

웹 프론트엔드 시작하기 (리액트&리덕스)