Redux [Basic] - 개요

01.Redux란?

• Redux는 여러 컴포넌트 또는 전체 컴포넌트들의 데이터 상태(state)를 관리하는 상태 관리 라이브러리 입니다.

Component-Communication

• 왼쪽 빨간색 컴포넌트에서 오른쪽 빨간색 컴포넌트의 데이터를 변경시키기 위해서는 여러 컴포넌트들을 지나쳐서props를 잘 전달해줘야 한다.
• 하지만 이렇게 props를 전달하면 서로간에 props를 주고 받는 왼쪽 끝과 오른쪽 끝의 컴포넌트를 제외한 나머지 컴포넌트들은 전달만 하는 컴포넌트로만 사용된다는 문제점이 있습니다.

Component-Communication-Redux

• 그림에서 파란색 원은 Redux를 의미하며 Redux를 사용하면 서로간에 props를 주고 받는 빨간색 원 컴포넌트들은 모두 Redux를 통해 서로 props를 주고 받습니다.

Redux

• 파란색 원을 Redux에서는 STORE라고 부릅니다.
• SOTRE안에 있는 상태 값(state)을 보라색 Component가 변경할 수 있습니다.
• 그리고 SOTRE의 상태 값(state)을 가지고 있는 모든 Component들은 SOTRE의 상태 값(state)이 변경되면 모두 다시 랜더링 됩니다.

02.단일 STORE를 만드는 방법 & React에서 SOTRE를 사용하는 방법

단일 STORE를 만드는 방법

• import redux
• 액션을 정의합니다.
• 액션을 사용하는 리듀서로 만듭니다.
• 리듀서들을 합칩니다.
• 최종 합쳐진 리듀서를 인자로 단일 SOTRE를 만듭니다.

React에서 SOTRE를 사용하는 방법

• import react-redux
• connect 함수를 이용해서 컴포넌트에 연결합니다.

03.프로젝트 생성

$ npx create-react-app redux-start
$ cd redux-start
$ npm install redux // SOTRE를 만들수 있는 Redux 라이브러리 설치
$ code .
$ npm start