Redux part-1 리덕스 설정/ 모듈/ useSelector

1.리덕스가 필요한 이유

 

• 컴포넌트에서 컴포넌트로 state를 보내기 위해서는 반드시 부모 자식 관계가 되어야 한다는 점
• 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내려면 반드시 사이에 부모 컴포넌트가 있어야 하는 점
• 앞서 진행한 과제로 인해서 뼈저리게 느꼈다. 부모 컴포넌트에서 자식컴포넌트로 밖에 값을 보내지 못하는점.

진짜 셀수가 없다. 이미 지난 주 과제하면서 많이 느꼈다.

Redux는 위 단점들을 모두 상쇄시킨다.

 

2. Global state와 Local state

 

Local state란?

 

컴포넌트 내에서 useState를 이용해서 생성한 state이다. 좁은 범위 안에서 생성된 state라고 

생각하면 된다.

 

Global state란?

 

state들을 관리하는 중앙 state 관리소 라고 할 수 있는 곳에 위치한 state이다. 

이 중앙 state 관리소에서 생성된 state들은 어디에 위치한 컴포넌트이든 상관하지 않고 

값이 전달될 수 있다. 이것들을 Global state라고 하고, 이러한 값들을 관리하는 것을 전역 상태 관리라고 한다.

 

3.리덕스란?

리덕스란, 쉽게 말해서 중앙 state 관리소를 사용할 수 있게 도와주는 패키지이다.

Global State들을 관리하게 도와주는 라이브러리이기 때문에 

다른말로 전역 상태관리 라이브러리 라고도 표현한다.

 

4.리덕스 설정

 

리덕스 설치

 

yarn add redux react-redux

 

폴더 구조 생성하기

 

좌측의 이미지와 같이 폴더 구조를 생성하자.

1. src 폴더 안에 redux 폴더를 생성
2. redux 폴더 안에 config, modules 폴더를 생성
3. config 폴더 안에 configStore.js파일을 생성한다.

각각의 폴더와 파일은 역할이 있다.

• redux : 리덕스와 관련된 코드를 모두 모아 놓을 폴더이다.
• config : 리덕스 설정과 관련된 파일들을 놓을 폴더이다.
• configStore : “중앙 state 관리소" 인 Store를 만드는 설정 코드들이 있는 파일이다.
• modules : 우리가 만들 State들의 그룹이라고 생각하면 된다. 예를 들어 투두리스트를 만든다고 한다면, 투두리스트에 필요한 state들이 모두 모여있을 todos.js를 생성하게 될 것이고, 이 todos.js 파일이 곧 하나의 모듈이 된다

 

 

 

 

 

 

설정 코드 작성

 

설정코드에 대해서는 왜 이렇게 쓰는지 이해할 필요가 없다.

쓰는 방법에 대해서만 집중하도록 하자

 

src/configStore.js

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

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

export default store;

 

 

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

 

5.모듈 

 

첫 모듈 만들기

 

모듈이란, State의 그룹이라고 했다.

따라서 지금부터 만들 counter.js 라는 파일은 카운터 기능을 만드는데 필요한

State들이 모여있는 모듈이 될 것이다.

 modules 폴더안에 counter.js라는 파일을 만들어보자.

// src/modules/counter.js

// 초기 상태값
const initialState = {
  number: 0,
};

// 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

 

모듈의 구성요소

 

(1) initialState === 초기 상태값

// 초기 상태값
const initialState = {
  number: 0,
};

이것을 initialState라고 한다. useState에서 괄호안에 초기값을 지정해 주던 것과 같은 이치이다.

 

// 초기값이 0
const initialState = 0;

// 초기값이 0이 있는 배열 
const initialState = [0];

// 초기값이 number = 0, name = '석구'인 객체
const initialState = {
	number: 0,
	name: '석구'
};

초기값은 위와 같이 객체나 배열이나 원시데이터 형태가 다 가능하다.

그리고 객체에도 여러개의 변수를 넣어줄 수 있다.

 

(2) Reducer === 변화를 일으키는 함수

리듀서란,변화를 일으키는 함수이다. 

이렇게 말하면 어려우니까 그냥 useState에서의 setState로 생각하면 편하다.

// 리듀서 
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

 

리듀서에게 number에 +1을 해줘라고 명령하면 리듀서는 +1을 더해준다.

그리고 인자에는 (state=initialState,action)이라고 되어있다.

첫번째 자리에서는 state의 초기값을 두번째 자리에서는 action이라는 것을 꺼내서 사용할 수 있다.

initialState처럼 state에 초기값을 할당해주어야 한다는 것을 기억하자.

 

(3) 카운터 모듈을 스토어에 연결하기

지금까지 모듈파일에서 초기값과 리듀서를 작성했다.

이제 우리가 만든 모듈을 스토어에 연결시켜야 한다.

// src/redux/modules/config/configStore.js


// 원래 있던 코드
import { createStore } from "redux";
import { combineReducers } from "redux";

// 새롭게 추가한 부분
import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter: counter, // <-- 새롭게 추가한 부분
});
const store = createStore(rootReducer);

export default store;

 

 

스토어와 모듈 연결 확인하기

 

useSelector = 스토어 조회

생성한 모듈을 스토어에 잘 연결했는지 확인하는 방법은 컴포넌트에 스토어를 직접 조회하면 된다.

컴포넌트에서 리덕스 스토어를 조회하고자 할때는 useSelector라는 react-redux 훅을 사용해야 한다.

// 1. store에서 꺼낸 값을 할당 할 변수를 선언한다.
const number = 

// 2. useSelector()를 변수에 할당해준다.
const number = useSelector() 

// 3. useSelector의 인자에 화살표 함수를 넣어준다.
const number = useSelector( ()=>{} )

// 4. 화살표 함수의 인자에서 값을 꺼내 return 한다. 
// 우리가 useSelector를 처음 사용해보는 것이니, state가 어떤 것인지 콘솔로 확인해보자.
const number = useSelector((state) => {
	console.log(state)
	return state
});

 

위 코드를 참고하여 App.js에 다음과 같이 입력한다.

 

// src/App.js

import React from "react";
import { useSelector } from "react-redux"; // import 해야한다.

const App = () => {
  const counterStore = useSelector((state) => state); // 추가해야한다.
  console.log(counterStore); // 스토어를 조회해보자.

  return <div></div>;
}

export default App;

 

우리는 컴포넌트에서 스토어를 조회할 때

react-redux에서 제공하는 useSelector 라는 훅을 사용한다.(중요)

 

브라우저를 켜고, 콘솔을 보면 아래 이미지처럼 객체가 보이고, 그 안에 counter 라는 값이 있는 것을 볼 수 있다.

우리가 만든 counter 라는 모듈의 state가 보이는 것을 알 수  있다.

이렇게 화살표 함수에서 꺼낸 state라는 인자는 현재 프로젝트에 존재하는 모든 리덕스 모듈의 state 인 것 .

결과

 

이제 우리는 어떤 컴포넌트에서도 접근할 수 있는 스토어를 가지게 되었다.

만약 우리가 컴포넌트에서 number라는 값을 사용하고자 한다면 아래 코드처럼 꺼내서 사용하면 된다.

const number = useSelector(state => state.counter.number); // 0

 

여기까지가 스토어에 state를 저장하여 useSelector로 state를 꺼내 사용하는 것을 배운 것이다.

이어지는 포스팅에서 setState처럼 state를 변경하는 방법을 얘기해보고자 한다.

 

 

 

정리

• 보통 모듈은 기능의 이름을 따서 파일을 생성한다.
• 모듈의 구성요소로는 initialState, Reducer가 있다.
• 모듈을 만들면, 스토어에 연결을 해야만 한다. 그리고 연결은 configStore.js에서 한다.
• 컴포넌트에서 Store를 조회할 때는 useSelector를 사용해야 한다.
• useSelector((state)⇒state) 에서 state는 모든 모듈의 state 를 조회할 수 있는 값이다.