처음 만난 리덕스 (Redux): Redux와 React 연동하기

FrontOverflow

Q&A

문서

매거진

처음 만난 리덕스 (Redux)

0. 준비하기

0.1

redux-devtools 소개

0.2

(실습) 개발환경 설정하기

0.3

(실습) redux-devtools 설치하기

1. Redux 소개

1.1

Redux의 탄생

1.2

Flux architecture

1.3

Three Principles of Redux

1.4

Redux Data Flow

1.5

꼭 Redux를 써야할까?

1.6

1장 요약

2. Redux 시작하기

2.1

Redux 구성요소

2.2

Immutability

2.3

어떤 경우에 Redux를 사용해야 할까?

2.4

Redux vs Context API

2.5

(실습) Counter 애플리케이션

2.6

2강 요약

3. Store

3.1

Store

3.2

Dispatcher

3.3

Store 관련 함수

3.4

(실습) TODO 애플리케이션

3.5

(실습) State Logging 버튼 만들기

3.6

(실습) Middleware 적용해보기

3.7

3강 요약

4. Action과 Action Creator

4.1

Action

4.2

Action Creator

4.3

(실습) TODO 애플리케이션에 다양한 Action 정의하기

4.4

(실습) Action Creator 만들기

4.5

4강 요약

5. Reducer

5.1

Reducer

5.2

Rules of Reducers

5.3

Immutable Update

5.4

combineReducers()

5.5

(실습) TODO 애플리케이션에 MEMO 기능 추가하기

5.6

5강 요약

6. Redux와 UI

6.1

Redux와 UI의 관계

6.2

Redux와 UI 연동

6.3

(실습) 신호등 애플리케이션 만들기

6.4

6강 요약

7. Container

7.1

Container

7.2

react-redux

7.3

react-redux의 주요 API

7.4

mapStateToProps()

7.5

mapDispatchToProps()

7.6

connect()

7.7

Redux와 React 연동하기

7.8

(실습) create-react-app을 사용해서 리액트 프로젝트 생성하기

7.9

(실습) Redux와 React 연동하기

7.10

(실습) TODO 애플리케이션 만들기

7.11

(실습) redux-devtools 연동하기

7.12

7강 요약

8. Ducks Pattern

8.1

Pattern

8.2

Ducks Pattern

8.3

Duck

8.4

(실습) TODO 애플리케이션에 Ducks 패턴 적용하기

8.5

8강 요약

9. redux-actions

9.1

FSA (Flux Standard Action)

9.2

redux-actions

9.3

redux-actions 주요 API

9.4

(실습) TODO 애플리케이션에 redux-actions 적용하기

9.5

9강 요약

10. Redux와 Async Logic

10.1

Async Logic

10.2

Side Effects

10.3

Redux와 Async Logic

10.4

Async Function Middleware

10.5

Redux Async Data Flow

10.6

(실습) Async Function Middleware 만들기

10.7

10강 요약

11. redux-thunk

11.1

Thunk

11.2

Thunk를 사용하는 이유

11.3

redux-thunk

11.4

Thunk 함수 작성 방법

11.5

Thunk 사용 패턴

11.6

(실습) redux-thunk 연동해서 Thunk 사용해보기

11.7

11강 요약

12. redux-saga

12.1

Saga

12.2

Generator Function

12.3

redux-saga

12.4

redux-saga 사용 방법

12.5

Thunk vs Saga

12.6

(실습) Generator Function 사용해보기

12.7

(실습) redux-saga 연동해서 Saga 사용해보기

12.8

(실습) 다양한 Effect Creator 사용해보기

12.9

12강 요약

13. redux-persist

13.1

Persist

13.2

redux-persist

13.3

Storage

13.4

데이터 저장 및 복원 과정

13.5

redux-persist 사용 방법

13.6

Migration

13.7

(실습) TODO 애플리케이션에 redux-persist 연동하기

13.8

(실습) Session Storage 연동하기

13.9

(실습) Migration 적용해보기

13.10

13강 요약

14. Redux Toolkit (RTK)

14.1

Redux Toolkit

14.2

Slice

14.3

Redux Toolkit 주요 API

14.4

immer 사용 패턴

14.5

(실습) TODO 애플리케이션에 Redux Toolkit 적용하기

14.6

(실습) Reducer 내에서 state 출력하기

14.7

14강 요약

15. Redux Hooks

15.1

useSelector()

15.2

useDispatch()

15.3

useStore()

15.4

(실습) Redux Container를 Hook을 사용하도록 변경하기

15.5

15강 요약

16. 미니 프로젝트

16.1

프로젝트 기획하기

16.2

(실습) 프로젝트 생성하기

16.3

(실습) 필요한 패키지 설치하기

16.4

(실습) 컴포넌트 구성하기

16.5

(실습) 프로젝트 폴더 구성하기

16.6

(실습) App 컴포넌트 구현하기

16.7

(실습) React와 Redux 연동하기

16.8

(실습) Slice 만들기

16.9

(실습) Board UI 구현하기

16.10

(실습) Todo UI 구현하기

16.11

(실습) Thunk 연동하기

16.12

(실습) redux-saga 연동하기

16.13

(실습) redux-persist 연동하기

16.14

16강 요약

처음 만난 리덕스 (Redux) 문서

7.7 Redux와 React 연동하기

지금까지 배운 내용들을 토대로 해서 Redux와 React를 연동하는 과정을 한 번 쭉 정리해보도록 하겠습니다.

Redux Store 생성

Redux Action Type 정의 및 Action Creator와 Reducer 구현

React Component 구현

Container 만들기

mapStateToProps()

mapDispatchToProps()

connect()

Provider를 사용해 store 전달하기 (Higher Order Component, HOC)

Container Component 렌더링

여기나온 내용은 Redux와 React를 연동하는 순서를 나타낸 것입니다.
이전 장에서 나왔던 Redux와 일반적인 UI를 연동하는 순서와 거의 유사하지만, 리액트에 특화되어 있기 때문에 살짝 다른 부분들이 있습니다.
참고로 여기서 설명하는 방식은 리액트 훅이 나오기 이전에 리액트 클래스 컴포넌트를 사용할 때 주로 사용하던 과거의 방법입니다.
최근에는 대부분 리액트 훅을 사용하는 방법을 사용하는데 Redux와 관련된 훅에 대해서는 뒤에 나올 강의에서 배울 예정입니다.

여기서 예전 방식을 먼저 배우는 이유는, 이러한 과거의 방법들에 대해서 먼저 배운 이후에 현재 사용되는 방식을 배워야 기초가 더 탄탄해지기 때문입니다.
그냥 처음부터 무작정 Redux 훅을 사용하게 되면, 내부의 작동방식과 원리에 대해 잘 모른채로 Redux를 사용하게 될 수 밖에 없습니다.

자, 그럼 Redux와 React를 연동하는 과정을 순서대로 하나씩 살펴볼까요?

먼저, Redux Store를 생성합니다.
이 과정은 Redux와 일반적인 UI를 연동하는 과정과 동일하게 Single source of truth를 만드는 과정입니다.

두 번째로는 Redux에 필요한 Action Type들을 정의하고 Action Creator와 Reducer를 구현하는 과정입니다.
이 과정은 어떻게 보면 연동의 과정이라기 보다는 Redux 설계의 과정에 가깝다고 볼 수 있습니다.
하지만 Redux를 사용하려면 이런 과정이 꼭 필요하기 때문에 넣어두었습니다.

다음 세 번째로는 Redux를 연동할 리액트 컴포넌트를 구현해야 합니다.
이 컴포넌트는 실제 화면에 보이는 UI를 담당하게 됩니다.
이전 실습에서는 HTML 태그들을 사용해서 UI를 만들었지만, Redux와 React를 연동하는 경우에는 리액트 컴포넌트를 사용해서 UI를 구성하게 됩니다.

네 번째 단계는 실제로 Redux와 React를 연결하는 과정이라고 할 수 있습니다.
앞에서 배운 Redux의 mapStateToProps(), mapDispatchToProps(), 그리고 connect() 함수를 사용해서 Container를 만드는 과정입니다.
이 과정을 통해 Redux에 연결 된 리액트 컴포넌트가 만들어지게 됩니다.

하지만 이렇게 Container만 만드는 것으로는 리액트 컴포넌트에서 Redux store에 접근할 수 없습니다.
그래서 다섯 번째 단계에서 앞에서 배운 Provider라는 react-redux 라이브러리의 Higher Order Component를 사용해서 store를 하위 컴포넌트에 전달하도록 만듭니다.
이렇게 되면 Provider의 모든 하위 컴포넌트에서 Redux store에 접근할 수 있게 됩니다.

마지막 여섯 번째는 이렇게 만들어진 Container Component를 실제 화면에 렌더링 하는 과정입니다.
여기서 주의할 점은 렌더링 할 Container Component가 다섯 번째 단계의 Provider 컴포넌트보다 하위 컴포넌트여야 한다는 점입니다.

지금까지 살펴본 이러한 과정을 통해서 Redux와 React를 연동해서 사용할 수 있습니다.

이 과정도 글로만 보면 잘 와닿지 않을 수 있습니다.
그래서 이어지는 실습에서 직접 단계별로 하나씩 구현해보면서 익혀볼 예정이니, 여기서는 Redux와 React를 연동할 때 어떤 작업들이 필요한지에 대해서만 잘 이해하고 넘어가기 바랍니다.

마지막 업데이트: 2023년 07월 14일 00시 00분

.css-jz2m06{color:var(--chakra-colors-blue-400);-webkit-text-decoration:underline;text-decoration:underline;}처음 만난 리덕스 (Redux) 문서

7.7 Redux와 React 연동하기

처음 만난 리덕스 (Redux) 문서