1/11[TIL]Redux

Redux

js 앱에서 예측 가능한 상태 관리를 해주는 컨테이너이다.

기존 react에서 상태(state)는 클래스 컴포넌트 안에서 관리한다. 그렇기에 형제 컴포넌트끼리 데이터를 주고받을 때 부모 컴포넌트를 통해서 주고받는다. 하지만 자식이 많아진다면 상태 관리가 매우 복잡해진다. 이러한 단점들을 해결할 수 있는 것이 redux이다.

 

동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다. redux는 데이터를 저장하는 스토어라는 공간 존재한다.

 

기존 react의 상태 변경을 하기 위해 setState를 사용했다면 redux는 action이라는 객체를 사용해서 state를 변경할 수 있다.

 

변경은 순수 함수로만 가능하다. 리듀서와 관련된 개념이다.

 

Redux에서는 Store / Action / Reducer라는 개념을 이해하여야 한다.

 

Store

상태가 관리되는 오직 하나의 공간이다. 컴포넌트와는 별개이다. 앱에서 필요한 state를 두고 컴포넌트에서 state 정보가 필요할 때 store에 접근하여 state 정보를 가져올 수 있다.

 

Action

js의 객체로 type을 비롯한 다양한 데이터가 담기고, store에게 애플리케이션 데이터들을 운반해주는 역할을 한다. 내용은 객체로 이루어져 있다.

{
    type: "ORDER",
    drink: {
        menu: "caffeLatte",
        size: "Venti",
        iced: true
    }
}

 

위의 언급한 내용을 바탕으로 정리하여 보면 action이라는 객체가 dispatch라는 메소드에게 전달되고 dispatch가 reducer를 호출해서 새로운 state 값을 만들어 낸다는 개념이다.

 

이는 데이터가 한 방향으로 흘러야 하기 때문에 위의 개념처럼 진행되는 것이다.

 

출처 : https://urclass.codestates.com/f713c46d-76d9-43e3-aad3-20dff3ee7f04?playlist=440

 

전반적인 redux가 사용되는 것을 간단히 위의 그림의 유형에 맞춰 설명하자면

우선 해당 이벤트가 발생하게 되면 dispatch의 전달 인자로 action객체를 담아서 reducer로 전달한다.

reducer는 action 객체의 타입에 따라서 다른 동작을 수행한다. 그 동작의 결과로 새로운 state를 반환한다.

이러한 것을 해결해주는 것이 Redux-Hooks이다.

 

그렇다면 이렇게 redux를 사용하게 되면서 생기는 장점에는 어떠한 것들이 있을까?

 

1. 상태를 예측 가능하게 만들어 준다.

reducer는 순수 함수이기 때문에 다음 상태가 어떤 상태가 될지 쉽게 예측이 가능하다.

 

2.유지보수가 용이하다.

 

3. action과 state의 로그를 기록하면 추적이 가능하기에 디버깅이 유리하다. 이는 Redux 데브 툴로 확인 가능하다.

 

4. 순수 함수를 사용하기 때문에 테스트를 붙이기도 쉽다.