🙈 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 흐름

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

나의 의견

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

>

익명 사용자

검색

🙈 Redux(리덕스)

이름공간

더 보기

문서 행위

목차

🙈 Redux(리덕스)

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

Redux를 사용하기 적합한 상황

Redux 키워드

1. Action (액션)

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

3. Reducer (리듀서)

4. Store (스토어)

5. Dispatch (디스패치)

6. Subscribe (구독)

Redux 흐름

나의 의견

둘러보기

둘러보기

위키 도구

위키 도구

익명 사용자

검색

🙈 Redux(리덕스)

🙈 Redux(리덕스)

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

Redux를 사용하기 적합한 상황

Redux 키워드

1. Action (액션)

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

3. Reducer (리듀서)

4. Store (스토어)

5. Dispatch (디스패치)

6. Subscribe (구독)

Redux 흐름

나의 의견

둘러보기

위키 도구

문서 도구