🙈 Redux(리덕스)

🙈 Redux(리덕스)

> `Redux`는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다.

`Redux`는 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브) 등에서 작동하고, 테스트하기 쉬운 앱으로 작성할 수 있게 도와준다. `React`와 `React Native`와 같은 다른 뷰 라이브러리와 함께 사용할 수 있고, `Redux`는 매우 작지만(의존 라이브러리 포함 2KB), 사용 가능한 애드온(프로그램의 기능을 보완하기 위해 추가하는 보조 프로그램)은 매우 많다.

Redux를 사용하면 전역으로 상태를 관리해주는 저장소를 제공 받을 수 있어, 언제 어디서든 저장소에 접근하여 상태관리(state management)를 편리하고 효율적으로 다룰 수 있게 해준다.

Redux는 이럴 때 사용해야 한다.

`Redux`는 상태를 관리하기에 유용한 도구이지만 현재 상황에 적합한지 따져 보아야 한다. 단지 누군가가 사용하라고 했다는 이유만으로 `Redux`를 사용해서는 안된다. 시간을 들여서 잠재적인 이점과 그에 따르는 단점을 이해해야 한다.

Redux를 사용하기 적합한 상황

> 1. 계속해서 변화하는 상당한 양의 데이터가 있을 경우 > 2. 상태를 위한 단 하나의 근원이 필요할 경우 > 3. 앱에 중간 또는 큰 규모의 코드베이스가 있고, 많은 사람들이 작업할 경우

Redux 키워드

`Redux`를 본격적으로 사용하기 전 용어와 개념을 알아야 한다.

1. Action (액션)

상태를 업데이트하는데 필요한 정보를 담은 객체다. `Action` 객체는 반드시 고유한 타입(type)의 프로퍼티(Property)를 가져아하고, 상태를 변경해야 될 때, 어떠한 변화를 줄지 해당하는 액션을 발생시킬 수 있다.

2. Action Creator (액션 생성 함수)

`action`이 동작에 대해 선언된 객체라면, `Action Creator`는 `action`을 생성하여 실제 객체로 만들어 주는 함수다. 변화를 생길 때마다 `action` 객체를 만들어줘야 하는데, 매번 새로운 객체를 만들 필요 없이 함수로 만들어 재사용할 수 있다.

3. Reducer (리듀서)

`store`에 접근해서 상태(state) 변화를 일으키는 함수다. 액션을 발생시키려면 `reducer`가 현재 상태와 전달받은 액션 객체를 파라미터(parameter)로 받아온다. 반환하는 상태는 새로 만들어서 반환을 해준다.

4. Store (스토어)

`store`는 상태가 관리되는 오직 하나의 공간이다. 앱에서 현재`state`와 `reducer`가 저장되어 있으며, 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.

5. Dispatch (디스패치)

`Dispatch`는 `store` 내장 함수 중 하나이며, `action`을 발생시키는 함수다. `action`을 파라미터로 전달하고,`dispatch`가 호출되면 `store`는 `reducer` 함수를 실행시켜서 새로운 상태를 만들어 준다.

6. Subscribe (구독)

`Subscribe`는 `store`의 내장 함수 중 하나이며, 특정 함수를 전달해주면 `action`이 `dispatch` 되었을 때마다 전달된 함수가 호출된다.

Redux 흐름

<img src="https://velog.velcdn.com/images/tlsl13/post/d537b15b-d1cd-4671-b761-4709581207a1/image.gif" width="30%" height="30%"/>

> 1. UI에서 컴포넌트 내에 존재하는 이벤트가 호출된다. > 2. 이벤트와 연결된 `Action Creator`가 호출된다. > 3. Action Creator에서 생성된 `Action`이 호출된다. > 4. `Action`이 `Reducer`로 전달된다. 이 과정을 `Dispatch`에서 담당한다. > 5. `Reducer`에서 `Dispatch`된 action에 따라 상태값을 변경한다. > 6. 변경사항이 렌더링되어 UI에 나타난다.

나의 의견

간단한 프로젝트에는 `Redux`를 사용하는 것보다 협업을 하는 경우나 복잡한 로직 구조일 때 사용하면 효율적이다. `Redux`를 사용하면 유지보수가 용이해지므로 기본 개념과 흐름을 알고있다면 이 라이브러리를 활용하는 것을 추천한다.

>