상태 관리 라이브러리 - Redux

Redux란?

✅ JavaScript 상태관리 라이브러리(리액트에 종속된 라이브러리 X)

 

Redux의 기본 개념 

1. Single source of truth
✅ 동일한 데이터는 항상 같은 곳에서 가지고 온다. → 스토어라는 하나 뿐인 데이터 공간이 있다.

2. State is read-only

✅ 액션이라는 객체를 통해서만 상태 변경이 가능하다.

3. Changes are made with pure functions

✅ 변경은 순수함수로만 가능하다. → 리듀서와 연관되는 개념

 

Redux DAta Flow Diagram

설치방법

# npm
npm install redux react-redux
# yarn
yarn add react-redux

 

store 생성과 reducer

⭐ store 생성시 reducer를 반드시 주입해야한다.

 

reducer

✅ store 안에 있는 state를 어떻게 바꿀 것인가를 결정하는 것

✅ reducer는 두 개의 파라미터를 인자로 받는다.

currentState : 현재의 state 값
action : 어떻게 바꿀 것인지에 대한 요청을 받는 action

✅ reducer는 새로운 state를 리턴한다.

✅ redux는 각각 state의 변화를 불변하게 유지해야하는데 이를 위해 새로운 state를 만들 땐 과거의 state를 복제한다.

 

예시 코드

import {createStore} fromm 'redux'
function reducer(currentState, action){
	if(currentState === undefined) {
		// 만약 state가 정의되지않았다면 
		// 기본 state 값을 통해 설정할 수 있음! 
		return {
			number:1
		}
	}
	const newState = {...currentState};
	// 각 state 변화를 불변하게 유지하기 위해 복제함 
	return newState;
}
const store = createStore(reducer);

 

 

중요 개념

Provider

✅ react-redux 라이브러리에 내장되어있는, 리액트 앱에 store를 손 쉽게 연동할 수 있도록 도와주는 컴포넌트.
✅ Provider 컴폰너트를 불러온 후에 연동할 컴포넌트를 감싼 후 Provider 컴포넌트의 props로 store 값을 설정해주면 된다.

 

useSelector

✅ 어떤 state값을쓰고 싶은지 선택 → 함수를 인자로 받음(이 함수는 state값을 입력값으로 받는다)
✅ redux의 state를 조회할 수있음

 

useDispatch

✅ state값을 변경 시킬 때 사용한다.

 

connect

✅ 컨테이너 컴포넌트를 만드는 또 다른 방법
✅ 리덕스 스토어 안에 있는 상태를 props로 넣어줄 수도있고 액션을 디스패치하는 함수를 props로 넣어줄 수도 있다.

✅ 사실 useSelector와 useDispatch가 편하기 때문에 컨테이너 컴포넌트를 새로 만들 경우 사용할 일이 거의 없음.
→ 하지만 2019년 이전에 작성된 리덕스와 연동된 컴포넌트들은 connect 함수로 작성이 되어있어 이 함수가 어떻게 작동하는지 알아야한다!

 

 

 

 

적용 코드

✅ Left1 컴포넌트 안에 Left2 컴포넌트가, Left2 컴포넌트 안에 Left3 컴포넌트가 있는 구조(Right1 컴포넌트도 동일)

import React from 'react';
import './style.css';
import {createStore} from 'redux';
import {Provider, useSelector, useDispatch } from 'react-redux';

function reducer(currentState, action){
	if(currentState === undefined) {
        return {
            number: 1,
        };
	}
	const newState = { ...currentState};
	if(action.type === 'PLUS') {
		newState.number++;
	}
	return newState;
}

const store = createStore(reducer);
export default function App() {
	return (
		<div id="contatiner">
			<h1>Root</h1>
			<div id="grid">
				<Provider store={store}>
					<Left1></Left1>
					<Right1></Right1>
				</Provider>
			</div>
		</div> 
	);
}

function Left1(){
	...
}
...

 

 

---

Reference

 

https://www.youtube.com/watch?v=yjuwpf7VH74 

 

https://ko.redux.js.org/introduction/getting-started

Redux 시작하기 | Redux

https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/

Redux(리덕스)란? (상태 관리 라이브러리) - 하나몬

https://react.vlpt.us/redux/09-connect.html

9. connect 함수 · GitBook