[TIL] 2023.08.31 - Redux / Redux 설치 및 설정

 Redux 

• "중앙 state 관리소"를 사용할 수 있게 도와주는 패키지(라이브러리)
• "중앙 state 관리소"에서 생성된 State = Global state
• Global state들을 관리하는 것 = 전역 상태 관리
• 리덕스를 사용하면 State를 공유할 때 부-모 관계가 아니여도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 됨
• 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용할 수 있게 됨
• 중앙 State 관리소에서 State를 생성하고,  만약 어떤 컴포넌트에서 State가 필요하다면 컴포넌트가 어디에 위치하고 있든 상관없이 State를 불러와서 사용 할 수 있게 됨

- 리덕스는 전역상태 관리 라이브러리
- 리덕스는 useState를 통해 상태를 관리했을 때 발생하는 불편함을 일부 해소
- 리덕스는 중앙 State 관리소를 가지고 있으며, 모든 State는 이곳에서 생성
- 리덕스에서 생성한 State는 Global State이고, useState로 생성한 State는 Local State

 

 Redux 설정 

1. 설치

yarn add redux react-redux

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

 

2. 폴더 구조

1) 폴더 구조 생성

• src` 폴더 > redux 폴더 생성
• redux 폴더 > config, modules 폴더 생성
• config 폴더 > configStore.js 파일을 생성

 

2) 폴더와 파일 역할

• redux 폴더 : 리덕스와 관련된 코드를 모두 모아 놓을 폴더
• config 폴더 : 리덕스 설정과 관련된 파일들을 놓을 폴더
• configStore 파일 : “중앙 state 관리소" 인 Store를 만드는 설정 코드들이 있는 파일
• modules 폴더 : 우리가 만들 State들의 그룹!

 

 Redux 설정 코드 작성 

1. configStore.js

 

2. index.js