리액트 숙련 - Redux

 

 

 

Redux란?

“중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리)

중앙 state 관리소 : 모든 State는 이곳에서 생성되고 관리된다.

 

리덕스를 사용하면 State를 공유하고자 할 때 부-모 관계가 아니어도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 된다.

그리고 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용할 수 있게 된다.

 

useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State이다.

 

 

 

Redux 설치

프로젝트 생성 후 vscode 터미널에서 아래의 코드 입력

# redux와 react-redux를 설치한다.
yarn add redux react-redux

# 아래와 같은 의미
yarn add redux
yarn add react-redux

 

 

 

폴더 구조 생성

App.js ➔ App.jsx 로 변경

src 폴더 > redux 폴더 생성 : 리덕스 관련 코드 모음

redux 폴더 > modules 폴더 생성 : state 그룹들(redux 안에서 사용할 modules 모음)

redux 폴더 > cinfig 폴더 생성 : configuration (redux 설정 관련 파일 전부)

cinfig 폴더 > configStore.js 파일 생성 : 중앙 state 관리소(= store) ➔ 관련된 설정 코드들