[Trello 만들기 3일차]List 의 추가 (action, dispatch(Hook에서 사용))

오늘은 시간에비해 진전이 없었다. 그마저도 벨로퍼트님의 블로그(https://react.vlpt.us/) 없었으면

아직도 씨름하고 있었을것이 분명하다.

리덕스의 기본개념은 정말 너무 상세하고 자세하게 기술되어있기때문에 나처럼

삽질하지말고 차근차근 읽어본후 부딪히길 바란다......

 

오늘 구현할 기능은 아래와 같다.

 

Add another List를 누르고 나온 입력폼에 뭔가를 적고 ADD LIST 를 누르면

오른쪽처럼 리스트가 추가되는것이다.

 

일단 오늘 습득한 개념은 action과 dispatch 이다.

그리고 1일차에 이해가 안갔던 부분도 사실 사전세팅이었다.

오늘들어서 보니 action의 type에 따라서 새로운 상태를 만들어주는 reducer 였다.

const listsReducer = (state = initialState, action) => { 
  switch (action.type) { 
  
  default: 
  	return state; 
  } 
};

 이부분 말이다.

 

아무튼 이제 위의 기능을 구현하기 위해 액션 타입과 액션 생성함수를 만들어 줘야 한다.

src 아래에 actions 라는 폴더를 하나 만들고 아래에 index.js 와 listsAction.js 를 만들어 준다. 

index.js 에는 액션의 타입을 정의해 줄 것이고

listsAction 에는 액션 생성함수를 써줄 것이다.

우선 index.js

export * from "./listsAction";

export const CONSTANTS = {
  ADD_CARD: "ADD_CARD",
  ADD_LIST: "ADD_LIST"
};

 우리는 카드를 만들 기능도 있어야 하고 리스트보드를 만들 기능도 있어야 하기에 이렇게 추가해놓는다.

그리고 listsAction.js에는

import { CONSTANTS } from "../actions";

export const addList = title => {
  return {
    type: CONSTANTS.ADD_LIST,
    payload: title
  };
};

 이렇게 해준다.

이렇게 하고 만약에 우리가 입력폼에 뭔가의 말을 쓴다음에 add버튼을 누르게되면

dispatch로 addList 라는 액션을 발생시킬꺼고 addList의 파라미터에 우리가 쓴 텍스트가 들어오게 될 것이다.

그렇게되면 reducer가 액션이 일어났다ㅏㅏㅏㅏ 하면서 새로운 상태를 그리게 되는 것인데,

새로운 상태를 어떻게 그릴껀지 이제 정의해 주면 된다.

아래처럼

let listID = 2;
//-----initialState 위쪽에 let listID를 만들어준다 ----//



const listsReducer = (state = initialState, action) => {
  switch (action.type) {

	case CONSTANTS.ADD_LIST:
		const newList = {
			title:action.payload,
			cards:[],
			id:listID
		};
    listID += 1
    return [...state, newList];
    
    default:
      return state;
  }
};

이게 이제 액션이 일어나서 액션의 타입이 List 를 만드는 액션이었기 때문에 case CONSTANTS.ADD_LIST 의

안에있는 내용들이 실행되어 새로운 리스트보드를 만들게 되는 것 이다.

newList 는 title 로 아까 액션인 addList 의 payload 를 불러올 것이고

처음 카드는 없으니까 빈 배열, id는 list의 갯수에 따라서 변할 것이기 때문에 따로 선언을 해주고 넣어준다.

그리고 리스트를 그리고 나서는 다음 리스트의 ID를 1씩 더해주기위해 listID에 할당연산자를 통해 1을 더해준다. 

 

이렇게 한뒤 trelloActionButton.js 로 가서 이제 이벤트가 발생할 수 있게 액션들을 걸어줄것인데

여기서 아주 미친듯이 헤맸다..

 

우선 클릭했을때 dispatch 가 일어날 수 있게 함수를 하나 만들어 준다.

    const handleAddList = () => {
      if (text) {
        dispatch(addList(text));
      }
      return;
    };

이놈은 이전에 만들어놨던 text state 가 비어있다면 dispatch를 하지 않지만

뭔가 입력되고 버튼이 눌렸다면 dispatch 를 통해 위의 과정들을 실행 시켜줄 함수이다.

근데 이 함수를 입력하면 addList를 찾을수 없다고 뜰것인데 당연하다

import { addList } from "../actions";

해주자.

이러고나면 또 dispatch 를 찾을수 없다고 징징거릴 것이다.

리액트 Hooks 에서 dispatch 를 사용하기 위한 방법이 클래스형 컴포넌트랑 다른데,

일단

import { useDispatch } from 'react-redux';

이런식으로 useDispatch를 불러온다.

그리고 컴포넌트 안에

  const dispatch = useDispatch()

이런식으로 불러와준 뒤에 사용해야 에러가 나지 않는다.

이걸 몰라서 몇시간동안 고생한건지 이번에는 스택오버플로우도 안도와주더라..

무튼 이렇게까지 해주고 버튼 컴포넌트의 속성으로 아래의 값을 넣어준다.

onMouseDown={handleAddList}

마우스가 클릭되면 위의 함수가 실행되게 만들어 줄 것이다.

여기서!

왜 onClick onMouseDown을 쓰냐?

이전에 Textarea 의 속성으로 onBlur 이라는 속성을 줬었다.

이놈은 Textatea box 이외의 어느 공간을 누르면 state를 false 로 바꿔 폼이 닫혀버리게 만드는

역할이었는데 onClick를 할 경우, 이 이벤트가 일어나기도 전에 onBlur이 먼저 폼을 닫아버리는 것 이다.

이런 거지같은 불편함이 생기는데 이때 간단하게 해결할 수 있는 방법이

onMouseDown 을 쓰는 것 이라고 한다.

그렇게되면 이놈은 onBlur보다 먼저 작동해서 이상이 없게 된다.

 

일단 오늘은 여기까지 했고 내일은 card를 추가하는 과정인데

more difficult 라는 말이 들린것 같아서 큰일이다.