About Redux

1. 리덕스가 필요한 이유

(1) useState의 불편함

• 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었다. 근데 Props로 State를 공유하는 방법에는 불편한 점이 있다.

1. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다.
2. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미한다. (조부모 → 부모 → 손자)
3. 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다.

이러한 불편함 겪지 않기 위해 새로운 도구인 리덕스를 배워야한다.

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

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

 

(2) Global state와 Local state

• Local state (지역상태) 란?
  • 컴포넌트에서 useState를 이용해서 생성한 state 다. 좁은 범위 안에서 생성된 State 라고 생각하면 된다.
• Global state (전역상태)란?
  • Global state는 컴포넌트에서 생성되지 않는다. 중앙화 된 특별한 곳에서 State들이 생성된다. 좀 더 쉽게 얘기해서 “중앙 state 관리소” 라고 생각하면 된다.

중앙 State관리소에서 State를 생성하고, 만약 어떤 컴포넌트에서 State가 필요하다면 컴포넌트가 어디에 위치하고 있든 상관없이 State를 불러와서 사용 할 수 있게 된다. 이렇게 특정 컴포넌트에 종속되어 있는 것이 아니라 “중앙 state 관리소”에서 생성된 State를 Global state라고 한다. 그리고 이러한 값들을 관리하는 것을 전역 상태 관리 라고 한다.

 

2. 리덕스란 무엇인가?

(1) 리덕스 정의

리덕스란,

우리가 위에서 말한 “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리)다.

“중앙 state 관리소" 를 통해서 State를 관리한다는 아이디어는 굉장히 좋으나, 우리가 그것을 직접 구현하기는 어려우니까 패키지(라이브러리)의 도움을 받아 그것을 구현해보고자 한다.

프론트엔드 개발자들은 “리덕스”를 전역 상태관리 라이브러리 라고 많이 표현한다.

전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문이다.

 

3. 리덕스 설정

(1) 리덕스 설치

리액트에서 리덕스를 사용하기 위해서는 vscode 터미널에서 2개의 패키지를 설치해야 한다.

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

yarn add redux react-redux

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

(2) 폴더 구조 생성하기

 

4. 설정 코드 작성

(1) 설정 코드 작성 시, 주의사항

1. 우리가 작성하는 설정코드는 이해할 필요가 없는 코드들 이다, 코드 분석 금지 ❌
   1. 설정 코드를 작성하는 이유는 리덕스를 만든 리덕스팀에서 이렇게 설정을 하라고 안내하고 있기 때문이다.
   2. 리덕스 사용 “방법”을 중점으로 공부해야 한다. 리덕스를 어떻게 만들었는지, 왜 이렇게 설정하는지는 중요하지 않는다. 우리가 해야할 것은 단지 리덕스를 쓰는 방법만 익히면 된다. 

(2) src/configStore.js

• src/configStore.js

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

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

export default store;

(3) index.js

// 원래부터 있던 코드
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 우리가 추가할 코드
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>
);

// 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();

 

 

정리

• 리덕스는 전역상태 관리 라이브러리이다.
• 리덕스는 useState를 통해 상태를 관리했을 때 발생하는 불편함을 일부 해소시켜준다.
• 리덕스는 중앙 State 관리소를 가지고 있으며, 모든 State는 이곳에서 생성된다.
• useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State이다.
• 리액트에서 리덕스를 사용하려면, redux, react-redux 가 필요하다.
• 설정코드는 지금 당장 이해 할 필요가 없다.
• “중앙 State 관리소"를 Store (스토어)라고 부른다.
• 모듈이란, State들이 그룹이다.