근자감에 의해서 2시간을 날림

리덕스 강의를 거진 3~4번을 돌려보니까 강의 없이 혼자서 카운터 정도는 충분히 만들겠는데? 라는 근자감에 의해서 여기까지 왔다.

근데 확실한건 삽질하니까 삽질한 부분은 확실히 알겠다.....ㅇㅇ

그래서 아예 그냥 카테고리 만들어서 기록해볼까 한다 약간 코너속의 코너느낌으로다가

과정을 적기 보다 그냥 문제가 있었던 부분을 나눠서 다뤄볼까한다.

 

내 목표는 그냥 카운터 만들기였다. 그냥 버튼 +1 ,-1 누르면 숫자가 올라가고 빼지고 하는거 그게 다다.

첨엔 왠지 사용자의 입력값까지 받아서 만드는것도 후딱 할껏만 같았다.

근데 지금 쓰는 이시간에 겨우 +1 -1버튼 기능구현을 했다. 

막 시간이 아깝고 이런건 절때 아니고 진심은 이렇게라도 삽질해서 다 만들어냈다는게 기분이 좋다.

<첫번째 삽질>

//configStore.js

const rootReducer = combineReducers({
  counter: counter,      //modules안의 reducer
});

이렇게 입력을하고 실행을 했더니 counter 모듈이 자꾸 없다고 에러가 뜬다.

아 카운터 이름이 잘못됬나? 이러고 또 몇번을 몇번을 확인했다 이름도 바꿔보고 어디에 다른 스펠링으로 적었나 확인도하고

근데 그냥 import를 안했다

import counter from "../modules/counter";

ㅋㅋㅋ웃긴건 이거 넣고나서 오류메시지 다시 생각하니까 이해됨ㅋ차암내

 

<두번째 삽질>

그래도 강의를 몇번씩이나 돌려봤는데 하드코딩보단 actionValue랑 actionCreator 써보자 이러면서 

//  ./moduels/counter.js

const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";

//action creator 
export const addNumber = () => {
  return { type: PLUS_ONE };
};

export const minusNumber = () => {
  return { type: MINUS_ONE };
};

이렇게 적었다.

이제 이 액션을 디스패치해서 리듀서에게 값이 변경됬다~ 하고 알려줘야대니까 룰루하면서 App.js로 갔다.

import { useDispatch } from "react-redux";
import {addNumber,minusNumber} from "./redux/modules/counter";
  
  const handleAdd = () => {
    dispatch(addNumber);
  };

  const handleMinus = () => {
    dispatch(minusNumber);
  };

기존의 초기값 0으로도 다 세팅을 해놓고 이제 버튼에 저 함수 두개만 onClick으로 넣어놓고 버튼을 눌렀다.

근데 숫자가변하지도 않고 NaN , object 뭐이렇게 뜨는것이다.

그래서 뭐지? 하는마음에 어렴풋이 알고 있는 디버깅으로 한번 시도해봤다.

 

찍어보니까 값이 undefined네? .. 값이 리듀서에게 안넘어온것이다. 

그럼 내가 적은 action객체에는 아무 문제가 없는건데 뭐지? 또 그렇게 코드해석과 싸움을 했다.

그러다가 콘솔로 action값이 어떻게 하면 넘어오나 정말 여러가지로 많이 적었다ㅋㅋ기억에도 복잡할 정도로ㅋㅋ

근데 잘보니 object로 보내라 이런 말이 문뜩 있었던게 생각이 났다.난 분명 type까지 적어서 action객체를 적어서 보냈는데!?

하고 다시 수없이 봤던 App.js에 가보니까 

addNumber는 함수였다.객체를 반환하지만..?  그럼 저 문법이 틀렸다.💦

dispatch(addNumber( ));를 해주어야한다.   이 간단한걸 그냥 지나쳐가지고...🔥

다시는 이런 실수 안할듯ㅋㅋㅋ

 

진짜 아무런 도움없이 내 머릿속으로만 만들어봤는데 실행이되니까 이젠 카운터는 그냥 만들수 있을꺼같다.

이제 다음코스는 사용자의 입력값에 따라서 한번 만들어봐야지!