[React-Project Todo-app]컴포넌트 분리하기

반복되는 컴포넌트를 분리하여 재사용성을 향상 시켰다

 

분리한 컴포넌트는 TodoList,Modal,Button이다.

 

TodoList

 

TodoList는 일정을 보여주는 List이다

 

코드

import React from "react";
import Button from "./Button";

const TodoList = ({ item, doneEvent, deleteList, modalListRead }) => {
  return (
    <li key={item.id}>
      <div className="todo_content">
        <p className="title">{item.title}</p>
        <p
          className="content_text"
          onClick={() => {
            modalListRead(item.id);
          }}
        >
          {item.content}
        </p>
      </div>
      <div className="btn_box">
        {item.status === false
        ?<Button doneEvent={doneEvent} id={item.id}>
        완료
      </Button>
        :<Button doneEvent={doneEvent} id={item.id}>
        취소
      </Button>
        }
        <Button deleteList={deleteList} id={item.id}>삭제</Button>
      </div>
    </li>
  );
};

export default TodoList;

 

제목과 내용 완료버튼과 삭제버튼이 보여지고 props로 전달밭은 데이터를 제목과 내용에 넣어 주었다

 

그리고 TodoList컴포넌트는 map함수로 반복하였다

.map((item) => {
  return (
    <TodoList
      key={item.id}
      item={item}
      doneEvent={doneEvent}
      deleteList={deleteList}
      modalListRead={modalListRead}
    />
  );
})}

 

 

모달 컴포넌트

 

List의 내용을 클릭하면 자세히 보기 모달창이 출력된다.

import React from "react";
import Button from "./Button";

function Modal({modalContentUpd,modalTitle,modalContent,modalTitleInputHaedler,modlaContentInputHaedler,updateBtnEvent,updateCommitBtnEvent,modalClosetBtnEvent}) {
  return (
    <div className="list_content_modal">
      <div className="bg"></div>
      <div className="modal_wrap">
        {modalContentUpd === false ? (
          <div className="modal_text_box">
            <p className="modal_title">{modalTitle}</p>
            <p className="modal_content">{modalContent}</p>
          </div>
        ) : (
          <div className="modal_text_box">
            <input
              className="modal_title"
              placeholder={modalTitle}
              type="text"
              onChange={modalTitleInputHaedler}
            />
            <textarea
              className="modal_content"
              placeholder={modalContent}
              cols="41"
              rows="20"
              onChange={modlaContentInputHaedler}
            ></textarea>
          </div>
        )}

        <div className="modal_btn_box">
          {modalContentUpd === false ? (
            <Button  updateBtnEvent={updateBtnEvent}>
              수정
            </Button>
          ) : (
            <Button updateCommitBtnEvent={updateCommitBtnEvent}>수정완료</Button>
          )}

          <Button modalClosetBtnEvent={modalClosetBtnEvent}>닫기</Button>
        </div>
      </div>
    </div>
  );
}

export default Modal;

 

모달에 들어갈 제목과 내용 버튼 클릭시 동작할 함수들을 porps로 보내주었다

 

버튼 컴포넌트

 

사용되는 버튼도 반복되기에 컴포넌트로 분리시켰다.

import React from "react";

function Button({
  todoAddHaedler,
  doneEvent,
  deleteList,
  updateBtnEvent,
  updateCommitBtnEvent,
  modalClosetBtnEvent,
  id,
  children,
}) {
  let props;
  switch (children) {
    case "추가하기":
      props = todoAddHaedler;
      break;
    case "완료":
      props = doneEvent;
      break;
    case "취소":
      props = doneEvent;
      break;
    case "삭제":
      props = deleteList;
      break;
    case "수정":
      props = updateBtnEvent;
      break;
    case "수정완료":
      props = updateCommitBtnEvent;
      break;
    case "닫기":
      props = modalClosetBtnEvent;
      break;
    default:
      break;
  }

  return (
    <button
      onClick={() => {
        props(id);
        console.log(props);
      }}
    >
      {children}
    </button>
  );
}

export default Button;

 

버튼은 클릭할때 동작하는 함수가 다르기 때문에 컴포넌트에 children을 입력하고 switch문을통해 받아온 children값과 일치하는 함수를 props라는 변수에 담았다

버튼을 클리하면 children값과 일치하는 함수가 동작한다.