[TIL] 23/11/09 React 숙련: Redux 란?

한 일

- redux 강의 다 듣기

- 알고리즘 스터디 : 프로그래머스 4문제 풀기

 

TIL

Redux ?

전역 상태(Global state) 관리 라이브러리

 

기존 useState 불편 해소

- 컴포넌트 간에 상태(state)를 공유 하려면 부모자식 관계여야 하고, 
조부모와 손자 사이에 낀 부모 컴포넌트들은 props 를 사용하지 않아도 전달해야 함.

중앙 state 관리소에서 Global state를 생성하고 관리하면

컴포넌트들은 어디서든지 state를 불러와 사용할 수 있다. 

 

Redux 설치

yarn add redux react-redux

 

폴더구조

src/redux : 리덕스 관련 코드 모음

src/redux/config : 리덕스 설정 파일 모음

src/redux/config/configStore.js : 중앙 state 관리소! store를 만드는 설정코드들

src/redux /modules : 만들 State들의 파일 모음

(src/redux /modules/todo.js  : 내가만든 todo 파일)

 

//src/configStore.js

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

const rootReducer = combineReducers({
	todos,
}); // 여러 독립적인 reducer의 반환값들을 하나의 상태 객체로 만듬
const store = createStore(rootReducer);  //store를 만든다

//createStore는 권장하지 않음 -> 요새는 configureStore를 쓴다!!

export default store;

//index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 추가한 코드 (store와 Provider) : START
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

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

//App을 Provider로 감싸주고, configStore에서 export 한 store를 넣어줌
  <Provider store={store}> 
    <App />
  </Provider>
);
// 추가한 코드 : END

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

일반 redux를 Redux-Tool-Kit 으로 리팩토링 해보자~~

[TIL] 23/11/29 React 심화: Redux를 Redux Toolkit 으로 리팩토링

할 일 / 부족한 점

- 프로그래머스 문제 풀이 깃 허브 올리고 제출하기