daun.io

React TIL - TodoApp 만들기

2022 Aug 30

react.vlpt.us를 읽고 공부한 내용입니다.

Start project from scratch

npx create-react-app mashup-todolist
cd mashup-todolist
yarn add react-icons styled-components

모든 것은 컴포넌트입니다. 컴포넌트를 기획하고, 개발에 들어갑니다.

우리가 이번에 만들어야 할 컴포넌트는 총 5개 입니다. 컴포넌트를 만들기전에 앞으로 어떤 컴포넌트를 만들게 될 지, 그리고 각 컴포넌트가 어떤 역할을 하는지 알아봅시다.

vlpt 강좌에서는 다음과 같은 컴포넌트가 기획, 개발되었습니다. 다른 방식, 다른 이름을 가진 컴포넌트로도 Todo를 만들 수 있을까요? 생각해볼 수 있을 것 같습니다.

App.js

app.js는 프로젝트의 엔트리 포인트가 되어 줄 공간입니다. 우리는 이곳에 각각의 컴포넌트를 불러오고 렌더링할 것입니다.

TodoTemplate (Layout)

이 컴포넌트는 우리가 만들 투두리스트의 레이아웃을 설정하는 컴포넌트입니다. 페이지의 중앙에 그림자가 적용된 흰색 박스를 보여줍니다.

TodoHead (List View Metadata)

이 컴포넌트는 오늘의 날짜와 요일을 보여주고, 앞으로 해야 할 일이 몇개 남았는지 보여줍니다.

TodoList (List View)

이 컴포넌트는 할 일에 대한 정보가 들어있는 todos 배열을 내장함수 map 을 사용하여 여러개의 TodoItem 컴포넌트를 렌더링해줍니다.

TodoItem (List Indices)

각 할 일에 대한 정보를 렌더링해주는 컴포넌트입니다. 좌측에 있는 원을 누르면 할 일의 완료 여부를 toggle 할 수 있습니다. 할 일이 완료됐을 땐 좌측에 체크가 나타나고 텍스트의 색상이 연해집니다. 그리고, 마우스를 올리면 휴지통 아이콘이 나타나고 이를 누르면 항목이 삭제됩니다.

TodoCreate (Create Button)

새로운 할 일을 등록할 수 있게 해주는 컴포넌트입니다. TodoTemplate 의 하단부에 초록색 원 버튼을 렌더링해주고, 이를 클릭하면 할 일을 입력 할 수 있는 폼이 나타납니다. 버튼을 다시 누르면 폼이 사라집니다.

UI 개발 시작

글로벌 스타일을 통한 배경색 지정

App.js

import React from 'react';
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    background: #e9ecef;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <div>안녕하세요</div>
    </>
  );
}

export default App;

TodoLayout.js

velopert님의 강의 문서에서 이 모듈의 이름은 원래 TodoTemplate이었습니다. 개념의 이해를 확장하기 위해서 TodoLayout이라는 이름으로 바꿔서 코딩을 해봅니다.

import React from 'react';
import styled from 'styled-components';

const TodoLayoutBlock = styled.div`
  width: 512px; /* mobile first 시대입니다. 가로폭이 좁은 UI가 유저의 초점을 집중시킨다고 합니다. */
  height: 768px;

  position: relative; /* 추후 박스 하단에 추가 버튼을 위치시키기 위한 설정 */
  background: white;
  border-radius: 16px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);

  margin: 0 auto; /* 페이지 중앙에 나타나도록 설정 */

  margin-top: 96px;
  margin-bottom: 96px;
  display: flex;
  flex-direction: column;
`;

function TodoLayout({ children }) {
  return <TodoLayoutBlock>{children}</TodoLayoutBlock>;
}

export default TodoLayout;

TodoHead.js

TodoTemplate의 맨 위에 들어갈 메타데이터 (날짜, 남은 Todo 수 등)를 담은 컴포넌트를 만들어봅시다.

import React from 'react';
import styled from 'styled-components';

const TodoHeadBlock = styled.div`
  padding-top: 48px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e9ecef;

  h1 {
    margin: 0;
    font-size: 36px;
    color: #343a40;
  }

  p {
    margin: 0;
    font-size: 12px;
    color: #343a40;
  }

  .day {
    margin-top: 4px;
    color: #868e96;
    font-size: 21px;
  }

  .tasks-left {
    color: #20c997;
    font-size: 18px;
    margin-top: 40px;
    font-weight: bold;
  }
`;

function TodoHead() {
  return (
    <TodoHeadBlock>
      <h1>2022년 8월 30일</h1>
      <div className="day">화요일</div>
      <div className="tasks-left">할 일 2개 남음</div>
      <p>오늘도 화이팅!</p>
    </TodoHeadBlock>
  );
}

export default TodoHead;