<aside> 🔥 결과물 링크

</aside>

<aside> 🔥 Intro

기본적인 기능만을 갖춘 TodoList입니다.

아래의 기능들이 있습니다.

• todo 완료하기
• todo 추가하기
• todo 수정하기
• todo 삭제하기
• todo 중요도 설정 </aside>

<aside> 🔥 React에서 Modal 구현하기

개념

기본 window 위에 컴포넌트를 띄우는 것 사용자가 focus되는 효과가 있다.

외부 DOM 생성하기

index.js에 새로운 외부 DOM을 생성하는 것으로 시작한다.

외부 DOM을 연결해서 컴포넌트를 띄우는 방식이다.

Portal

create.Portal로 외부 DOM에 렌더링 하는 기능 제공

첫번째 인자로 렌더링할 수 있는 children, 두번째 인자는 DOM

createPort(children, rootElement)

import React from "react";
import { createPortal } from "react-dom";

const Portal = ({ children }) => {
	// modal-root에 렌더링
  const rootElement = document.getElementById("#modal-root");

  return <>{rootElement ? createPortal(children, rootElement) : children}</>;
};

export default Portal;

CSSTransition

컴포넌트가 mount 혹은 unmount될 때 transition을 줄 수 있는 라이브러리이다.

apper, enter, exit의 클래스 이름을 적용해서 사용 가능

// modal.css
.modal-enter {
  opacity: 0;
}

.modal-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}

.modal-exit {
  opacity: 1;
}

.modal-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

Modal 컴포넌트

모달 컴포넌트 바깥 부분 클릭시 onClose를 실행시키기 위해서 Dim이라는 구역을 잡았다.

CSSTransition을 사용해서 모달 컴포넌트가 enter, exit될 때 효과를 넣었다.

children으로 받는 AddTodoModal.js로 모달 창을 구성하고, selector로 외부 DOM을 연결했다.

• Modal.js
• AddTodoModal.js </aside>

<aside> 🔥 Dependencies

• React
• styled-components : CSS in JS 라이브러리
• styled-reset : css 초기화 라이브러리
• react-icons : 아이콘
• react-transition-group : 컴포넌트에 transition 줄 수 있는 라이브러리 </aside>

<aside> 🔥 Components

• App : 최상위 컴포넌트로 state 및 event함수를 가지고 있는 컴포넌트
• Template : Todo리스트를 중간에 정렬하고 전체 틀을 구성
• SideBar : 추후 router-dom으로 추가할 예정
• TodoHeader : 카테고리 이름 및 분류 탭으로 구성된 헤더
• TodoList : state로 관리되는 todos를 TodoListItem으로 매핑 및 추가 버튼으로 구성된 컴포넌트
• TodoListItem : 각각의 todo를 렌더링해주는 컴포넌트
• AddTodoModal : todo를 추가하는 모달을 구성하는 컴포넌트 </aside>

<aside> 🔥 App.js

state : todo리스트 관리, 모달 열림 유무 관리

function : todo 삭제, 수정, 완료, 중요도, modal 열림, 닫힘

ref : todo id 참조

• 전체코드 </aside>

<aside> 🔥 Templates.js

todo 앱을 가운데로 배치하는 역할 및 전체적인 틀

• 전체코드 </aside>

<aside> 🔥 TodoHeader.js

카테고리 제목 및 남은 개수 렌더링, 추 후 탭으로 전체, 완료되지 않은 항목, 완료된 항목으로 나눌 예정

• 전체코드 </aside>

<aside> 🔥 TodoList.js

최상위 루트에서 관리되고있는 todo리스트 항목들을 가져와서 TodoListItem으로 매핑 시켜주는 역할

추가하기 모달이 구현되어 있으며, 완료됨과 완료되지 않음으로 나뉘어서 렌더링되도록 함.

• 전체코드 </aside>

<aside> 🔥 TodoListItem.js

state : text를 관리, 수정 모드 관리

function : text input onchange, 수정 모드 토글, 수정 완료 기능

• 전체코드 </aside>