[Trello 만들기 4일차 1]카드 추가기능

생각보다 분량이 많지 않았다.

지래 겁먹어서 어렵겠다... 하고있었는데 생각보다 쉬웠다.

 

오늘 만든건 저번시간과 대충 비슷한 맥락의 리스트보드 안의 카드 추가였다.

복습하는 느낌으로 따라하니 괜찮았다.

 

우선 actions 폴더에 cardsActions.js 를 만들어 준다.

이후 저번 listsAction.js 내용을 복붙해주고(거의 같으니까)

세부 내용만 조금 수정해 주었다.

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

export const addCard = (listID, text) => {
    return {
        type: CONSTANTS.ADD_CARD,
        payload: {text, listID}
    };
};

 이놈은 파라미터로 listID 와 text 를 받는데 listID는 카드가 어느 리스트보드에 그려질지

확인하는 용도로 쓰일것이다. 즉 입력하고 제출했을때 그 입력이 일어난 위치를 이 ID로 판단해서

그 위치와 listID가 동일한 곳에 카드가 생성된다는 말이다.

그리고 text는 list 만들때와 동일하게 Textarea의 value를 받아올 것이다.

 

그리고 Action을 추가했으니 index.js에도 추가해 준다.

export * from "./listsAction";
export * from "./cardsActions";

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

 

이제 listsReducer.js 로 가서 이놈들을 어떻게 업데이트 해줄 것인가에 대해 정의해주어야 한다.

 

마찬가지로 이 파일에서 저번 listID 의 끝 번호를 변수로 선언해놓았듯이 cardID도 선언해 놓는다

그래야 카드의 뒷부분에 추가가 될꺼니까..

(이부분은 사실 이 강의 자체가 뭔가 서버와의 통신은 배제하고 만든 강의라 추가해주는 것 같다)

let cardID = 4;
//마지막 카드의 ID 다음 숫자를 넣어줘야 입력한 카드가 뒤에 붙을 것 이다.
//나는 기본으로 카드 3장을 깔아놓고 시작했기때문에 4로 시작한것이고, 엿장수 마음대로다.
//2장으로 시작했으면 3으로 설정해놓으면 되는거고..

 

그리고 이제 case를 추가해 준다.

 

     // ADD_CARD 액션이 들어올 경우에
 	case CONSTANTS.ADD_CARD:

     // 일단newCard 라는 객체를 만들고 그안에 text는 Textarea의 값,
     //id는 선언해놓은 cardID를 부여하렴
      const newCard = {
        text: action.payload.text,
        id: cardID,

      }
      
     //다했으면 cardID 에 1 더해줘.
      cardID += 1

// 이제 newState 라는 새로운 상태를 만들껀데,
// 이놈은 기존의 initialState 을 맵으로 돌면서 각각의 카드보드객체를 list라는 이름의
// 파라미터로 받아오고
      const newState = state.map(list => {
      
	//만약 list의 id가 액션이 들어온 그놈이있는 list의 ID와 동일하다면,
        if (list.id === action.payload.listID) {
        
          return {
          //그 리스트보드를 일단 그리고 그 뒤에,
            ...list,
            //카드를 그리는데 원래 있던 cards 들과 아까만든 newCard를 뒤에 붙이렴
            cards: [...list.cards, newCard]
          }
          //만약에 액션이 들어온놈과 ID가 동일하지 않다면?
        } else {
        	//아무것도 하지말고 그냥 리스트보드를 그려줘
          return list
        }
      })
      //다했으면 newState를 return 하렴
      return newState

이렇게 쓰니까 좀 알아먹기가 쉽다.

 

이렇게 case까지 추가해 준 뒤, 액션을 이르킬 대상에게 간다.(TrelloActionButton.js)

어제 List를 추가하는 기능을 넣어준 그 버튼(onMouseDown 넣어준 그놈)

에게 가서 이제 삼항연산자로 조건을 넣어준다.

//props로 list가 들어오면 list를 그리고 그게 아니라면 card를 그리라고.
onMouseDown={list ? handleAddList : handleAddCard}

이후에 handleAddCard 함수를 추가해준적이 없으므로 이제 추가해준다.

handleAddList 밑쪽에

    const handleAddCard = () => {
      if (text) {
        dispatch(addCard(listID, text));
      }
      return;
    }

이렇게 추가해 준다. list 추가하는거랑 크게 다르진 않은데, 다만 어디에 추가될껀지 알아야하기때문에

이 props로 받아온 listID가 addCard에 넘어 갈 것이다.

 

근데 에러가 날꺼다 왜냐면 addCard를 import하지 않았기 때문이다.

import 해주자.

//addList 랑 같은 폴더에 있으니까 이런식으로 추가해 준다.
import { addList, addCard } from "../actions";

이제 또 에러가 날꺼다.

listID가 그래서 뭔데????? 이런 느낌의 에런데 당연히 props로 안받아왔으니까 그렇다.

 

App.js 에서 ID가 생성되니까 우선 여기로 가서

<TrelloList listID={id} key={id} title={title} cards={cards} />

TrelloList 에 listID라는 props를 넘겨준뒤 TrelloList로 가서

 

<TrelloActionButton listID={listID}/>

버튼에게 listID를 다시 넘겨준다. 그리고 TrelloActionButton 으로 가서

 

const TrelloActionButton = ({ list, listID })

이렇게 받아주면 된다.

 

이렇게 하고나서 카드를 추가해 보면 잘 추가되는걸 볼 수있다.(물론 새로고침하면 없어지지만 ^^)

근데 문제가 추가를 하고나서 Textarea에 그대로 값이 남아있다는 문제가 있다.

그래서

 

const handleAddList = () => {
      if (text) {
        dispatch(addList(text));
        setText("");
      }
      return;
    };
    const handleAddCard = () => {
      if (text) {
        dispatch(addCard(listID, text));
        setText("");
      }
      return;
    }

이런식으로 list나 card를 그리고나면 State(setText)를 초기화 시켜주라고 넣어주면 해결된다.

 

이제 다음시간엔 드래그 앤 드랍을 할것이다.