처음 만난 리덕스 (Redux): react-redux

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.2 react-redux

그렇다면 Container를 만들기 위해서는 어떻게 해야 할까요?
Container를 만들기 위해서는 리액트 컴포넌트와 Redux를 연결해야 하는데, 지금부터 그 과정을 도와주는 react-redux라는 라이브러리에 대해서 알아보도록 하겠습니다.

앞에서 말씀드린 것처럼 Redux는 리액트만을 위해서 개발된 상태관리 라이브러리는 아닙니다.
Redux의 공식 명칭은 ReduxJS이고 일반적인 JavaScript 애플리케이션에서도 사용할 수 있습니다.

하지만 Redux와 리액트를 함께 사용하는 경우가 대부분이며, 지금부터 살펴볼 react-redux 라이브러리는 둘 사이를 쉽게 연결할 수 있게 해주는 도구라고 보면 됩니다.

여기서 먼저 Binding Library라는 용어에 대해서 한 번 짚고 넘어가도록 하겠습니다.
Binding Library에서 앞에 bind라는 단어는 묶다, 결속시키다라는 뜻을 갖고 있습니다.
그래서 Binding Library라고 하면,

어떤 라이브러리를 특정 환경에서 사용하기 위해서, 그 환경과 라이브러리를 중간에서 묶어주는 역할을 하는 라이브러리

를 의미합니다.

그리고 Binding Library를 줄여서 Binding이라고 부르기도 합니다.

Redux에도 다양한 Binding Library들이 있습니다.
그 중에서도 Redux와 React를 연동하기 위해서 사용하는 공식 Binding Library가 있는데, 그게 바로 react-redux입니다.

react-redux

지금 보시는 화면은 react-redux의 공식 웹사이트입니다.
화면 가운데에 React Redux를 Official React bindings for Redux라고 정의하고 있는것을 볼 수 있습니다.
이 라이브러리가 바로 Redux와 React를 연동해서 사용할 수 있게 해주는 공식 Binding Library입니다.
공식으로 지정된 Binding Library이기 때문에 Redux와 React를 연동하기 위해서는 이 라이브러리를 사용하면 됩니다.

그럼 실제로 Redux와 React를 연동할 때는 어떤 식으로 해야 할까요?
다음 절에서 먼저 react-redux의 주요 API들에 대해서 배우고, 이후에 Redux와 React를 연동하는 방법에 대해서 배워보도록 하겠습니다.

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

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

7.2 react-redux

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