📌 목차

✨ react-redux(2022년 개정판)

💁🏻

React Redux

Redux란

상태를 중앙에서 관리하는 것을 통해서 데이터가 예측하지 않은대로 변형되는 가능성을 낮춰주는 기술.

즉 개발의 복잡성을 낮춰주는 기술이다.

pure React는 유선 연결이다

pure React로 구현한 샘플 코드에서는, 버튼을 눌렀을 때 상승하는 값을 전달하기 위해
모든 function안에 props를 전달하는 이벤트 함수 코드와, 받아오는 코드를 작성해야 했다. 만약 전달하는 과정에서 거쳐가는 개체가 1억개라면, 하나하나 전달하는 시간은 엄청나게 늘어날 것이다.

React Redux는 무선 연결, 블루투스, 와이파이다

React Redux를 사용하면 개체가 1억개여도 아무 문제가 없다.
무선 연결을 할 수 있기 때문이다.

Redux와 React는 두개의 독립적인 도구이다.
이 둘을 서로 연결하는 도구가 바로 React Redux이다.
React Redux 홈페이지를 들어가면 설치 방법을 볼 수 있다. React-Redux-getting-started

먼저 기존 샘플코드의 모든 개체에서 props를 도려낸다. 그 뒤 Redux와 React-Redux를 함께 설치한다.

그 후 App.js에

import { createStore } from 'Redux';

코드를 작성해 store을 만든다.

만들어진 store는 수정하면 안되기 때문에 상수로 선언하고 CreateStore를 통해 store을 생성한다.

const store = createStore

store을 생성할 때 반드시 파일에 reducer을 주입해야 한다.

reducer는 store안에 있는 state를 어떻게 바꿀 것인가를 결정한다.
그렇기때문에 reducer는 두 개의 파라미터를 받는다.
첫번째는 currentState(현재 상태값)이고, 두번째는 action(어떻게 바꿀 것인가에 대한 요청)을 받는다. 그리고 그렇게 받은 값을 return해주면 그 값이 새로운 state값이 된다. 이 때 redux는 각각의 state의 변화를 불변하게 유지해야하는데,
그러기 위해 새로운 state를 만드는 데에 과거의 state값을 복제한다.
우리는 그 복제본을 수정함으로써 원본의 불변성은 유지할 수 있다.
변화시킨 복제본의 state값을 return하는 것이다.

function reducer(currentState, action) {
  const newState = { ...currentState }
  return newState
}

또 하나는 만약 currentState의 값이 undefined라면
(state가 정의되지 않았다는 뜻이므로)
기본 state값을 return해줌으로써 state값을 설정할 수 있다.

function reducer(currentState, action) {
  if (currentState === undefined) {
    return {
      number: 1,
    }
  }
  const newState = { ...currentState }
  return newState
}

이렇게 하면 기본 state값이 1이 된다.

이후 React-Redux의 4인방을 import한다.

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

이 4가지는 Redux가 제공하는 기능들이다. Provider는 컴포넌트이고
useSelector는 어떤 state값을 쓰고 싶은지를 선택하는 것이고
useDispatch는 state값을 변경시킬 때 쓰는 것이다.
connect는 재사용할 때 꼭 필요한 것인데 쓰는 법이 조금 어려워서 이번 강의에서는 다루지 않는다.

Provider

state를 제공받는 컴포넌트들의
가장 바깥쪽에 울타리를 정의하는 것이다. Provider의 prop중에 store을 반드시 정의해주어야 한다.

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

여기서부터 이해가 어려웠음
그 다음 number값을 무선으로 연결해 표시하기 위해서
우리는 useSelector를 사용한다.
useSelector는 함수를 인자로 받는다.

function Left3(props) {
  function f(state) {
    return state.number
  }
  const number = useSelector(f)
  return (
    <div>
      <h1>Left3 : </h1>
    </div>
  )
}

위의 코드를 화살표 함수로 좀 더 간단히 표현하면

function Left3(props) {
  const number = useSelector((state) => state.number)
  return (
    <div>
      <h1>Left3 : </h1>
    </div>
  )
}

그리고 이 안의 Left3 : 옆에 {number}를 써주고 저장하면
브라우저에서 number값이 표시된다.

function Left3(props) {
  const number = useSelector((state) => state.number)
  return (
    <div>
      <h1> Left3 : {number}</h1>
    </div>
  )
}

바로 이것이!
전역적이라고 할 수 있는, store에 저장된 number state와
아래에, 말단에 있는 컴포넌트 안의 {number}을 무선으로 연결한 것이다.

그럼 이번엔 +버튼을 눌렀을 때, 말단 컴포넌트 안의 number값이 바꾸자.

button 안에 있는 onClick을 조작해야하고
그러기 위해서는 먼저 dispatch를 useDispatch를 통해 가져와야한다.
그 후 dispatch안의 type에 plus라고 하는 action을 전달한다.

function Right3(props) {
  const dispatch = useDispatch()
  return (
    <div>
      <h1>Right3</h1>
      <input
        type="button"
        value="+"
        onClick={() => {
          dispatch({ type: 'PLUS' })
        }}
      ></input>
    </div>
  )
}

그러면 reducer가 호출되는데
reducer가 호출됐을때 만약 type이 PLUS라면
newState.number는 1씩 증가시켜주면 된다.

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