redux로 카운터를 만들어 보자_TIL(32)

리덕스는 리액트를 쓸때 생겼던 props drilling을 방지할 수 있다.

전역 state를 store에 저장해놓고 어느 위치이던간에 사용할 수 있도록 한다.

Ducks패턴을 이용해서 정리를 해보려고한다! 이 순서에 맞게 정리를 하는 습관을 들여놓으면 코드의 가독성이 좋아질꺼같다.

---

• action value : value를 상수로 만들어 준다
• action creator : 액션객체를 반환하는 함수

하나씩 type:{ }적을 필요 없이 상수를 적어주면 된다.

이렇게 만들어 주고 리듀서를 작성한다.

초기값을 적어 주고 그 초기값을 state에 넣어주고 ,action(명령)과 함께 작성을 한다.

그리고 switch문을 사용해서 그에 맞는 값을 리턴할 수 있도록 코드를 작성해준다.

리듀서의 기본적인 문법을 저렇게 적으니까 잔말말고 써야지.

 

❗️Action creator을 왜쓸까!? 

 1.휴먼에러 방지

 2.유지 , 보수의 효율성이 높다

 3.가독성이 좋다.

 

위에 처럼 counter.js에 작성이 끝나면 내가 작성한 action creator가 컴포넌트에서 어떻게 사용할 수 있는지 본다.

1.export된 Action Creator을 import한다.
2.dispath(명령을 보내는)에 액션객체를 직접 넣기보다는 action creator을 넣는다.

그럼 payload 란?

 : 카운터로 보자면 인풋에 사용자가 입력값을 직접 넣어 사용할 수 있는 값이다.

  정해진 값을 더해! 보다 ~~값을 더해! 할때 ~~:(=payload)

  이 payload를 리듀서에게 보내고 싶으면 액션객체에 같이 담아주면 된다.

  내가 편하게 이해한거는 payload는 결국 State를 변경하는데 있어 사용한다.

 

type과 함께 payload를 인자로 넣고 사용한다.

그럼 이제 App.js에 가서 나머지 기능을 구현해야한다.

▷ 사용자의 입력값을 받을 input값 구현하기, action creator 작성하기 , 리듀서 작성, 기능테스트 순서로 하면 된다.

import React from "react";

const App = () => {
  return (
    <div>
      <input type="number" />
      <button>더하기</button>
      <button>빼기</button>
	  </div>
  );
};

export default App;

 

기본적인 틀을 작성한다. 그리고 순서대로 만들어본다.

1.사용자가 입력한 값을 받을 기능구현하기

input태그에 onChagne메소드를 넣고 input의 값이 변할때마다 화면에 렌더링이 될 수 있도록 만들어 준다.

 함수를 작성할때 길어지면 따로 뺴서 작성해주는게 좋다

import React from "react";
import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);

  const onChangeHandler = (event) => {
    const { value } = event.target;
    setNumber(+value);  //문자열을 숫자로 바꿔주기위해서
  };
  console.log(number);

  return (
    <div>
      <input type="number" onChange={onChangeHandler} />
      <button>더하기</button>
      <button>빼기</button>
    </div>
  );
};

export default App;

이렇게 input에 다가 onChangeHandler함수를 만들어 주고 이 함수가 실행되면 기본값이 0인 number을 setNumber를 통해서

기존의 number를 입력한 값으로 바꿔준다. 

! 저기 보이는 콘솔에 내가 입력한 글자마다 뜬다면 코드가 잘 실행되고 있다는거

 

2.Action creator작성하기

<여기는 counter.js>

// Action Value
const ADD_NUMBER = "ADD_NUMBER";

// Action Creator
export const addNumber = (payload) => {
  return {
    type: ADD_NUMBER,
    payload: payload,
  };
};

아까 위에서 한것 처럼 value -> creator순서대로 적어준다.

그리고 payload를 인자로 받아서 리듀서에게 넘겨줄 값을 payload으로 해준다.

이제 나머지 부분을 작성한다.

const initialState = {    //초기값
  number: 0,
};


const counter = (state = initialState, action) => {    //리듀서
  switch (action.type) {
    case ADD_NUMBER:
      return {
        number: state.number + action.payload,
      };
    default:
      return state;
  }
};
export default counter;

여기서 리듀서는 꼭 export 해줘야한다 그래야 밖에서도 사용할 수 있으니까

그리고 저기 있는 return 다음 부분은

state.number (기존의 number 지금으로는0임)에 action.payload(유저가 더하길 원하는 값)을 더한다.

 

3.기능테스트해보기?!

  기존의 App.js에 추가해야할 구문을 알아봐야지!

  우선, 첫째로 App.js에서 useSelector를 이용해서 Store의 값을 조회한다. (store에 state를 연결해서 전역으로 사용할 수 있다)

// src/App.js

import React from "react";
import { useState } from "react";
import { useSelector } from "react-redux";  //import는 무조건!

const App = () => {
  const [number, setNumber] = useState(0);
  
 //useSelector 사용구문
  const globalNumber = useSelector((state) => state.counter.number);

  const onChangeHandler = (event) => {
    const { value } = event.target;
    setNumber(+value);
  };

  return (
    <div>
	//위에서 useSelector을 사용해 가져온 state를 입력
      <div>{globalNumber}</div>
      <input type="number" onChange={onChangeHandler} />
      <button>더하기</button>
      <button>빼기</button>
    </div>
  );
};

export default App;

globalNumber로 state에 있는 counter의 number ↓

const initialState = {    //초기값
  number: 0,
};

이 값을 선택해서 가져온 값이 globalNumber다.

그리고 이 값을 화면이 렌더링될 구간에 넣어준다  {globalNumber}

 

두번째로, Action Creator를 import 하고, payload를 담아 dispatch한다. 

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

// 4. Action Creator를 import 합니다.
import { addNumber } from "./redux/modules/counter";

const App = () => {
	// 1. dispatch를 사용하기 위해 선언해줍니다.
  const dispatch = useDispatch();
  const [number, setNumber] = useState(0);
  const globalNumber = useSelector((state) => state.counter.number);

  const onChangeHandler = (event) => {
    const { value } = event.target;
    setNumber(+value);
  };

	// 2. 더하기 버튼을 눌렀을 때 실행할 이벤트핸들러를 만들어줍니다.
  const onClickAddNumberHandler = () => {
		// 5. Action creator를 dispatch 해주고, 그때 Action creator의 인자에 number를 넣어줍니다.
    dispatch(addNumber(number));
  };

  return (
    <div>
      <div>{globalNumber}</div>
      <input type="number" onChange={onChangeHandler} />
			{/* 3. 더하기 버튼 이벤트핸들러를 연결해줍니다. */}
      <button onClick={onClickAddNumberHandler}>더하기</button>
      <button>빼기</button>
    </div>
  );
};

export default App;

이 부분은 순차적으로 보면좋을꺼같다. 강의 자료에 나와있는데 이렇게 적어놔야 이해가 잘될듯

사실 나도 다시 봐야함ㅋㅋㅋㅋㅋㅋ

 

---

이렇게까지 만들면 카운터 끝!

오늘로 따지면 이 강의를 한 2~3번은 본것같은데 이제 쫌 감이 잡힌다.그렇타고 내가 막 만들수 있겠다는 아님;;;

첨에 들었을떄는 vscode가 빼곡하게 주석이였다 ㅠ 한 줄씩 다 해석해본다고 시간도 많이 걸렸고...

그래도 그 덕분인지 아 이게 이래서 저렇구나 정도...? 누구한테는 설명못하겠다.ㅋㅋ

이제 정리도 했으니까 다시 혼자서 만들어보고 안되는 부분은 중간중간에 참고해서 만들어봐야지ㅎㅎ

손코딩을하자...! 😎