[TIL] 22.05.16

Redux

리덕스란

• "액션" 이라는 이벤트를 통해서 애플리케이션의 상태를 관리하고 업데이트하기 위한 패턴 혹은 라이브러리
• 상태가 예측 가능한 방식으로만 업데이트될 수 있도록 보장하는 규칙과 함께 전체 애플리에키션에서 사용해야하는 상태에 대해 중앙 저장소 역할을 수행

기술 사용 목적

전역에서 상태 관리함으로써 애플리케이션 상태 변화와 로직의 동작을 더 이해하기 쉽고, 예측이 가능해진다.

• 컴포넌트 자식에게 props를 넘겨주는 이 작업이 컴포넌트의 중첩이 깊어질수록 번거러워짐
• props 만으로는 이것을 한 번에 ( 자식의 * 100 ) 자손까지 전송시키는 방법은 없기 때문 ...

장점

요약 : 복잡한 상태 관리가 한결 편해진다.

• 어디든 그 상태가 필요한 컴포넌트는 store에서 요청해서 가져다 쓰기만 하면 되기 때문에 props 전달하는 등의 번거러움을 해결해준다.
• 해당 state를 사용하는 컴포넌트들이 그 값을 각자 자신의 컴포넌트에 맞게 변경해야하는 경우 store로부터 변경하기 위한 요청을 하게 되고 store에서는 안에서 정의한 state 변경하기 위한 함수를 반환해줌으로써 해당 state를 변경할 수 있다. ( 컴포넌트의 결합도를 떨어트려 부품으로써 역할을 수행할 수 있게 도와준다. )
• 만약 state에 다른 값이 들어와서 버그나 에러 등의 문제가 발생할 때, 그 컴포넌트를 찾는게 아니라 store만 확인하면 되기 때문에 에러 핸들링이 한결 쉬워진다.

usage

1. CRA를 사용하는 경우

# redux + plain js template
npx create-react-app my-app --template redux

# redux + typescript template
npx create-react-app my-app --template redux-typescript

2. 기존 앱에서 라이브러리 추가하는 경우

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

src/index.js

import { Provider } from 'react-redux';
import { createStore } from 'redux';

const defaultWeight = 100; // 전역에 다룰수 있는 상태를 선언 및 초기 값 할당

function reducer(state = defaultWeight, action) { // state 수정하는 방법은 reducer 안에서 명시한다.
    if(action.type === 'increase') {
        state++;
        return state;
    } else if(action.type === 'decrease') {
        state--;
        return state;
    } else {
        return state;
    }

}

let store = createStore(reducer); // createStore에 정의한 reducer를 인자로 넣어준다. 

ReactDOM.render(
	<React.StrictMode>
    	<Provider store={store}> {/* Provider에 store 속성을 준다. */}
        	<App />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root');
);

• ReactDOM의 root 폴더에서 전역 상태를 사용하기 위한 redux 라이브러리 설치와 기본 세팅을 한다.

src/app.js

import './App.css';
import { useSelector, useDispatch } from 'react-redux';

function App() { 
	const yourWeight = useSelector((state) => state); // 전역에 다룬 상태를 꺼냄, 100
    const dispatch = useDispatch();
    return (
    	<div className="App">
        	<p>당신의 몸무게 : {yourWeight}</p> {/* 당신의 몸무게 : 100 */}
            <button onClick={() => { dispatch({type : 'increase'}) }} >더하기</button>
        </div>
    );
}

export deafult App;

• state를 가져와서 사용하려면 useSelector를 사용하고, 수정을 하려면 useDispatch를 사용한다.