[REACT] Redux 사용하기

P__.mp4·2022년 9월 25일

REACT

목록 보기

4/7

사용 이유

React 에서 useState 를 사용할 경우, 컴포넌트 내부에 state를 만들고 setState로 state를 바꿀 수 있게한다. 이런 경우 해당 state는 컴포넌트에 종속적이게 된다.

Redux 를 몰랐던 이전, React 에서 상위컴포넌트의 state를 하위컴포넌트가 사용하려면 최상위 부모 컴포넌트에서 선언하고 props를 이용하여 자식 컴포넌트로 넘겨줬다. 컴포넌트의 깊이가 깊어질 수록 비효율적이고, 보기 매우 안좋다(귀찮아진다.)

하지만!! Redux 는 컴포넌트에 종속적이지 않고 상태관리를 컴포넌트 외부에서 하기 때문에 위에서 말한 useState 의 단점을 어느정도 상쇄할 수 있다.

Redux 는 프로젝트의 루트 레벨에 store 라는 곳에 state를 저장하고, 모든 컴포넌트가 해당 store 를 구독함으로 store 에 선언된 state를 사용 및 바꾸는 함수를 전달 받게된다.

흐름

Deposit $10 버튼을 클릭한다.

dispatch 함수를 실행시켜 action을 일으킨다.

store에선 이전 state와 현재의 action으로 reducer함수를 실행하고, 리턴된 값을 새로운 state로 저장한다.

store에서 store를 subscribe하고 있던 UI 컴포넌트들 에게 업데이트 여부를 알린다.

store의 데이터가 필요한 각각의 컴포넌트들은 state가 업데이트되었는지 확인한다.

데이터가 변경된 요소들은 새로운 데이터로 강제 리렌더링 되므로화면에 표시되는 내용을 업데이트할 수 있다.

요약

Dispatch 함수를 통해 action 을 전달하고, reducer 에 정의된 로직(action에 대한 state 처리방법)에 따라 store의 state 가 변화

키워드

Dispatch : useDispatch, action을 reducer로 전달
reducer : action과 이전 state 값을 매개변수로, state와 해당 state를 변경할 함수를 정의
store : Redux의 state를 관리

기본 사용

1. reducer 정의

//counter.js
const initial = {	//초기 state 값
    number: 1,
};

const counter = (currentState = initial, action) => {
    const tempState = { ...currentState };

    switch (action.type) {
        case "PLUS":
            tempState.number++;
            break;

        default:
			tempState.number = 0
    }

    return tempState;
};

export default counter;

dispatch의 의해 이전 state와 action을 매개변수로 받아온다.
Redux 또한 불변성 유지가 필수이므로 spread 연산자를 사용하여 기존 state를 복사하여 값을 변경하였다.

2. Store 생성

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import counter from './reducer/counter';


function App() {
  const store = createStore(counter);

  return (
    <>
      <Provider store={store}>
        <Main/>
      </Provider>
    </>
  );
}

export default App;

생성한 reducer를 store에 담아주기 위해 createStore'
프로젝트의 최상단에서 Provider 로 감싸주고 store={store}

3. state 값 가져오기, 변경하기

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';



const Home = () => {
    const number = useSelector(state => state.number);
    const dispatch = useDispatch();

    return (
        <div>
			{number}
      		<button onClick={() => dispatch({type: "PLUS"})}>증가</button>
        </div>
    );
};

export default Home;