[TIL #23] 231114_Redux란? 리덕스 설정 및 설치하기

Bora.K | 권보라·2023년 11월 15일

React TIL

TIL

목록 보기

23/51

오늘 한 일

[개인Project] 팬레터함 만들기
[내배캠] React 숙련 강의 듣기

학습 내용

REDUX

1. 리덕스란?

전역 상태관리 라이브러리 : 중앙 state 관리소를 사용할 수 있게 도와주는 패키지(라이브러리)

(1) 리덕스가 필요한 이유 - useState의 불편함

어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보내고자 할 때 Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 값을 전달한다. 즉, State를 보내기 위해서는 반드시 부-모 관계가 있어야 하고, 부모 컴포넌트를 거쳐야만 한다.
provider의 state가 하나라도 변경이 되면, 하위 컴포넌트 전체가 리렌더링 된다.
자식 컴포넌트에서는 부모 컴포넌트로 값을 보낼 수 없다.

→ 리덕스를 사용하면 중간 컴포넌트를 거치지 않아도 사용할 수 있다.

(2) Local state와 Global state

Local state (지역상태) 란?
컴포넌트 내에서 useState를 이용해서 생성한 state
Global state (전역상태)란?
중앙화된 특별한 곳에서 State들을 생성 중앙 state 관리소
모든 컴포넌트에서 state를 불러와서 사용할 수 있다.

2. 리덕스 설정

(1) 패키지 설치
redux와 react-redux 두 개의 패키지를 설치한다.

react-redux는 리액트에서 리덕스를 사용할 수 있도록 서로 연결시켜주는 패키지이다.

yarn add redux react-redux

(2) 폴더 구조 생성
src 폴더 안에

redux : 리덕스와 관련된 모든 코드를 모아 놓을 폴더
config : 리덕스 설정과 관련된 파일을 모아 높을 폴더
- configStore.js : 중앙 state 관리소
modules : 우리가 만들 state들의 그룹

(3) 설정 코드 작성
작성 코드는 이해하려고 하지 말고, 사용 방법을 중점으로 공부한다.

createStore()
리덕스의 가장 핵심이 되는 스토어를 만드는 함수
combineReducers()
리덕스는 action → dispatch → reducer 순으로 작동하는데, 이 때 애플리케이션이 복잡해지면 reducer 부분을 여러 개로 나눠야 한다. combineReducers는 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어 준다.
src/config/configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({}); 
const store = createStore(rootReducer); 

export default store;

index.js
디렉토리 가장 최상단에 있는 index.js에 아래 코드를 작성한다.

// 추가할 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

//App을 Provider로 감싸주고, configStore에서 export default한 store를 넣어준다.
  <Provider store={store}> 
    <App />
  </Provider>
);

reportWebVitals();