[TIL] Redux란?

 

리덕스는 전역 상태 관리 라이브러리이다.

애플리케이션의 상태를 효율적으로 관리할 수 있게 도와주는 도구이다.

쉽게 말해 모든 컴포넌트에서 바로 접속 가능한 저장소로 모든 컴포넌트들이 State를 쉽게 공유할 수 있게 해주는 방식이라 보면 된다.

만약 깊이가 A부터   F까지인 컴포넌트 트리 구조가 있다고 가정하면,  A ▶ B ▶ C ▶ D ▶ E ▶ F  순서로 접근  이동시켜야하고, 다시  F ▶ E ▶ D ▶ C ▶ B ▶ A 루트를 통해 돌아와야하는데 이런 상황은 굉장히 귀찮고 번거로운 과정이다.

그런데 만약 리덕스를 사용해 하나의 Store라는 매체를 두면 컴포넌트가 어느 위치에 있던 간에 A ▶  Store ▶ F  로 바로 상태 값을 가지고 올 수 있다. 

 

• Redux를 쓰는 이유

1. 모든 컴포넌트들이 props문법 없이 state를 직접 꺼내쓸 수 있다. => 데이터 전달 편리

2. 상태(state)관리의 용이 =>  store안에 state 수정 방법을 미리 정의해둔다. 컴포넌트들은 직접 state를 수정하지 않고 수정 요청만 보내서 그냥 가져와쓰면 된다.

3. 버그가 일어났을 때 추적이 쉽다. 버그가 생기면 store.js를 보자.

 

 

• 기본 용어

- 스토어(Store) 

: 실제 데이터가 저장되는 전역 저장소 ( = Global State를 관리)

 

- Reducer

: 특정 액션(Action)에 따라서 Store값을 변경한다. 리액트 컴포넌트의 이벤트 핸들러와 비슷하다.

 

- Action

Reducer가 어떤 동작을 수행해야할지 알려주는 역할을 하며

State에 어떤 변화가 필요할 때 우린 액션이란 것을 발생시키며 이는 하나의 객체이다.

어떤 동작에 대해 선언되어진 객체인 셈이다.

액션은 반드시 type 필드를 가지고 있어야하며, 그 외의 값은 상황에 따라 넣어줄 수 있다.

 

- Dispatcher

Reducer에게 Action을 호출할 때 사용되는 함수이다. 컴포넌트에서 사용되고, dispatch(action)이런 식으로 Action 을 인자로 넘긴다. 

 

 

• Redux의 동작 방식

일단 Store와 컴포넌트가 어떻게 상호작용하는지를 이해해야한다.

우리가 컴포넌트에서 사용해야 하는 데이터를 서버로부터 가지고 왔다고 가정해보자.

그럼 그 데이터를 바로 컴포넌트에 적용시키는 것이 아니라 우선 스토어에 저장시켜야한다.

그런 다음 스토어에 해당 데이터를 추출하여 자신의 컴포넌트에 사용해야 한다. 

상황에 따라서 데이터를 저장소에 저장할 필요가 없는 경우가 있을 수 있다. 

그런 경우에는 저장소에 저장하지 않고 바로 사용해도 무방하다.