우당탕탕 늑개 React #1 - Redux 알아보기

유튭에서 애플코딩님의 강의를 보고 정리해 보는 "Redux"
https://www.youtube.com/watch?v=QZcYz2NrDIs

들어가며

react로 개발할 때 컴포넌트 간 통신은 무작정 props로만 전달하는 아주 무식하고 원시적인 방법만을 생각했다
부모가 자식에게 props를 던지면 다시 자식은 그 자식에게 props를 전달하는 쉬운(?)길만을 택했다

그리고, 쪼렙 늑개라서 공통 관심사에 대한 개발은 그다지 큰 고민을 하지는 않았다
공통 개발을 하시는 분들이 만들어 준 코드를 바라보며 큰 고민 없이 그냥 기계적으로만 코딩을 해왔다

누구나 다 할 줄 아는 그 redux를 이제야 정리해 보려 한다

마침 유튭의 애플코딩님이 너무나도 쉽고 간단한게 개념을 잡아 주셔서
시청 후기의 느낌으로 내용을 정리해 보았다

우선 사용하는 이유는 다음과 같다

1. props 문법 귀찮을 때 사용
2. state 변경 관리할 때 사용

• React 스타일 웹개발은 컴포넌트의 조합을 통해 개발
• 컴포넌트에서 state(변수) 생성 후 다른 컴포넌트에서 사용 시
  --> 직접 가져다 사용할 수 없으므로 props로 전송해야 함
• 컴포넌트의 중첩이 많아질 수록 state를 전해주기 위해 prop를 계속 전달해야 함
• Redux를 통해 store를 생성해 state 관리

1. props 문법 귀찮을 때 사용

1. redux 설치
2. redux 셋팅

// index.tsx
import { Provider } from "react-redux";
import { createStore } from "redux";

const weight = 100; // state 생성

const reducer = (state = weight, action) => {
  return state;
};
let store = createStore(reducer);
const rootElement = document.getElementById("root");
render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

3. 컴포넌트에서 써 보기

// App.tsx
import { useSelector } from "react-redux";

const Component = () => {
  const useReudx = useSelector((state) => state);
  return (
    <div className="app">
      <p>Your Weight is : {useRedux}
    </div>
  )
}

모든 component가 props 없이 state 직접 꺼내어 쓸 수 있음

2. state 변경 관리할 때 사용

• 각 component에서 state를 각각 변경 시 변경 추적이 어렵다
• redux를 통해 state 변경 방법을 미리 등록해 두어 state를 관리
• 각 component에서는 store에 state 변경만을 요청하게 함

// index.tsx
const reducer = (state = weight, action: any) => {
  // reducer에 state 변경 방식을 등록
  switch (action.type) {
    case "increase":
      state++;
      return state;
    case "decrease":
      state--;
      return state;
    default:
      return state;
  }
};

import { useDispatch, useSelector } from "react-redux";

const dispatch = useDispatch(); // dispatch 등록

export default function App() {
  const useReudx = useSelector((state) => state);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1>코딩애플 강좌</h1>
      <h2>React 입문자들이 알아야할 Redux 쉽게설명 (8분컷)</h2>
      <p>your Weight is : {useReudx} </p>
        <button
          onClick={() => {
            dispatch({ type: "increase" }); // state 수정 요청을 위해 dispatch 사용
          }}
        >
          Increase
        </button>
        <button
          onClick={() => {
            dispatch({ type: "decrease" }); // state 수정 요청을 위해 dispatch 사용
          }}
        >
          Decrease
        </button>
    </div>
  );
}

결과물