react-redux

react-redux(2022 개정판) 을 듣고 정리한 내용입니다.

react-redux

react-redux 란 redux를 react에서 쉽게 사용할 수 있도록 돕는 도구이다.

---

props

컴포넌트 간에 데이터를 주고 받을 때 사용하는 것이 props이다.

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [number, setNumber] = useState(1);
  return (
    <div id="container">
      <h1>Root : {number}</h1>
      <div id="grid">
        <Left1 number={number}></Left1>
       
      </div>
    </div>
  );
}
function Left1(props) {
  return (
    <div>
      <h1>Left1 : {props.number}</h1>
      <Left2 number={props.number}></Left2>
    </div>
  );
}
function Left2(props) {
  return (
    <div>
      <h1>Left2 : {props.number}</h1>
      <Left3 number={props.number}></Left3>
    </div>
  );
}
function Left3(props) {
  return (
    <div>
      <h1>Left3 : {props.number}</h1>
    </div>
  );
}

위 예시는 3개의 컨테이너가 중첩되어있다.
실행을 하면 다음과 같은 화면이 나온다.

Root에서 Left3까지 number를 전달하기 위해선 중첩된 컨테이너에 모두 props 전달해 주어야함 하위 컴포넌트까지 데이터를 전달할 수 있게 된다.

---

중첩된 컴포넌트가 수십, 수백개가 되는 경우엔 어떻게 해야할까?
수십, 수백개의 컴포넌트를 모두 props로 연결하지 않고도 컴포넌트에 데이터를 전달하는 방법을 알아보자.

---

redux 설치

npm install redux react-redux

위 명령어를 이용하여 redux와 react-redux를 설치하자.

---

createStore

store는 데이터를 저장하고 있는 공간이다.
이 공간을 만들기 위해 redux에서 createStore를 만들어 주자.
store는 불변상태로 저장되어야 하므로 const로 사용해 상수로서 선언하였다.

import { createStore } from 'redux';
const store = createStore(reducer);

reducer

reducer는 데이터의 상태 변화를 전달해준다.
store와 연결하여 변경된 상태를 저장한다.

reducer는 현재상태와, 어떻게 바꿀 것인지 요청을 받는 두개의 파라메터를 인자로 받는다.

function reducer(currentState, action) {
  // 현재 상태가 정의 되지 않았다면
  // 기본 상태값을 리턴
  if (currentState === undefined) {
    return {
      number: 1,
    };
  }

currentState가 정의되어있지 않는 경우에 기본값을 현재 상태로 지정해주었다.

---

Provider

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

Provider는react-redux에서 임포트해서 사용하는 4가지 항목 중 하나로써, 상태 데이터를 어떤 컴포넌트에게 전달할지 지정해주는 컴포넌트이다.

export default function App() {
  return (
    <div id="container">
      <h1>Root </h1>
      <div id="grid">
        {/* Provider는 store이라는 props를 반드시 전달해주어야한다.  */}
        <Provider store={store}>
          <Left1></Left1>
        </Provider>
      </div>
    </div>
  );
}

Left1 컴포넌트를 Provider로 감싼 후, store를 전달해 주자.
reducer의 currentState가 정의되지 않았으므로 기본 값인 1이 number에 저장된다.

---

useSelector

useSelector는 상태를 전달 받고 싶을 곳에서 사용한다.

props를 통해 Left1, Left2를 거치지 않고 직접 Left3에게 직접 전달해 줄 것이므로 다음과 같이 Left3 컴포넌트를 수정하자.

function Left3(props) {
  // number 값을 직접 전달받고 싶을때
  // useSelector는 함수를 인자로 받는다.
  const number = useSelector((state) => state.number);
  return (
    <div>
      <h1>Left3 : {number} </h1>
    </div>
  );
}

---

useDispatch

useDispatch는 상태 값을 변경할 때 사용한다.
Left3에 버튼을 만들고, 버튼을 클릭할때마다 number가 하나씩 증가하도록 해보자.

function Left3(props) {
  // number 값을 무선으로 전달받고 싶을때
  // useSelector는 함수를 인자로 받는다.

  const number = useSelector((state) => state.number);
  // 상태값 변경 
  const dispatch = useDispatch();
  return (
    <div>
      <h1>Left3 : {number} </h1>
      <input
        type="button"
        value="+"
        onClick={() => {
          dispatch({ type: 'PLUS' });
        }}
      ></input>
    </div>
  );
}

onClick이 이루어 질때마다 dispatch는 store의 reducer에게 action을 전달해 준다.

reducer함수를 수정해보자.

function reducer(currentState, action) {
  // 현재 상태가 정의 되지 않았다면
  // 기본 상태값을 리턴
  if (currentState === undefined) {
    return {
      number: 1,
    };
  }
  // state 의 변화를 불변하게 유지하기 위해 복제
  // 복제본을 수정
  const newState = { ...currentState };
  if (action.type === 'PLUS') {
    newState.number++;
  }
  return newState;
}

상태를 변경하기 위해서는 깊은 복사가 이루어져야한다.
현재 상태를 복제하고 복제본을 수정하여 리턴하면 상태가 변경된다.

---

전체 코드

import React, { useState } from 'react';
import './style.css';
import { createStore } from 'redux';
// 4인방
// 컴포넌트, 어떤스테이트를 사용할지 선택할때, 스테이트 값을 변경
import { Provider, useSelector, useDispatch, connect } from 'react-redux';
function reducer(currentState, action) {
  // 현재 상태가 정의 되지 않았다면
  // 기본 상태값을 리턴
  if (currentState === undefined) {
    return {
      number: 1,
    };
  }
  // state 의 변화를 불변하게 유지하기 위해 복제
  // 복제본을 수정
  const newState = { ...currentState };
  if (action.type === 'PLUS') {
    newState.number++;
  }
  return newState;
}
const store = createStore(reducer);
export default function App() {
  return (
    <div id="container">
      <h1>Root </h1>
      <div id="grid">
        {/* Provider는 store이라는 props를 반드시 전달해주어야한다.  */}
        <Provider store={store}>
          <Left1></Left1>
        </Provider>
      </div>
    </div>
  );
}
function Left1(props) {
  return (
    <div>
      <h1>Left1 : </h1>
      <Left2></Left2>
    </div>
  );
}
function Left2(props) {
  return (
    <div>
      <h1>Left2 : </h1>
      <Left3></Left3>
    </div>
  );
}
function Left3(props) {
  // number 값을 무선으로 전달받고 싶을때
  // useSelector는 함수를 인자로 받는다.

  const number = useSelector((state) => state.number);
  const dispatch = useDispatch();
  return (
    <div>
      <h1>Left3 : {number} </h1>
      <input
        type="button"
        value="+"
        onClick={() => {
          dispatch({ type: 'PLUS' });
        }}
      ></input>
    </div>
  );
}