[Todo-List] 2. 컴포넌트 생성

🏃Dekay (JuniorDeveloper)·2021년 10월 3일
0

ToyProject

목록 보기
2/5
post-thumbnail

1. UI 구성 ✍

  • 컴포넌트src 디렉터리에 components 디렉터리를 생성하여 저장했다.
  • Todo-List 프로젝트는 기능을 구현하기 전 UI를 먼저 구현하고 기능을 구현하는 순서로 진행된다.

1.1 TodoTemplate 만들기

  • src/components 디렉터리에 TodoTemplate.jsTodoTemplate.scss 파일을 생성하여 다음과 같이 작성했다.
//TodoTemplate.js
import React from "react";
import './TodoTemplate.scss';


const TodoTemplate = ({ children }) => {
    return (
        <div className="TodoTemplate">
            <div className="app-title">일정 관리</div>
            <div className="content">{children}</div>
        </div>
    );
};

export default TodoTemplate;
//TodoTemplate.scss
.TodoTemplate {
    width: 512px;
    /* width가 주어진 상태에서 좌우 중앙 정렬 */
    margin-left: auto;
    margin-right: auto;
    margin-top: 6rem;
    border-radius: 4px;
    overflow: hidden;

    .app-title {
        background: #2998b9;
        color: white;
        height: 4rem;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content {
        background: white;
    }
}
  • 위의 코드에서 레이아웃을 할 때 flex라는 display 속성을 자주 쓰는데, 더 자세한 사용법은 Flexbox Froggy를 참고하자.

1.2 TodoInsert 만들기

  • src/components 디렉터리에 TodoInsert.jsTodoInsert.scss 파일을 생성하여 다음과 같이 작성했다.
//TodoInsert.js
import React, { useState, useCallback } from "react";
import { MdAdd } from 'react-icons/md';
import './TodoInsert.scss';

const TodoInsert = () => {
    return (
        <form className="TodoInsert">
            <input 
            placeholder="할 일을 입력하세요" />
            <button type="submit">
                <MdAdd />
            </button>
        </form>
    );
};

export default TodoInsert;
  • 위의 코드에서 react-icons아이콘을 사용했는데, react-icons에서 다양한 아이콘과 이름을 확인할 수 있다.
  • 위의 사이트에서 사용하고 싶은 아이콘은 다음과 같이 import 구믄을 사용하여 불러와 컴포넌트처럼 사용하면 된다.
import { 아이콘 이름 } from 'react-icons/md';
//TodoInsert.scss
.TodoInsert {
    display: flex;
    background: #495057;
    input {
        // 기본 스타일 초기화
        background: none;
        outline: none;
        border: none;
        padding: 0.5rem;
        font-size: 1.125rem;
        line-height: 1.5;
        color: white;
        &::placeholder {
            color: #dee2e6;
        }
        // 버튼을 제외한 영역 모두 차지하기
        flex: 1;
    }
    button {
        // 기본 스타일 초기화
        background: none;
        outline: none;
        border: none;
        background: #868e96;
        color: white;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: 0.3s background ease-in;
        &:hover {
            background: #adb5bd;
        }
    }
}
  • 위와 같이 스타일링하게 되면 + 버튼에 마우스를 올릴 경우 hover 기능을 통해 배경색이 바뀐다.

1.3 TodoListItem, TodoList 만들기

  • TodoListItem과 TodoList는 일정 관리 항목이 보이는 컴포넌트이다.
  • src/components 디렉터리에 TodoListItem.jsTodoListItem.scss 파일을 생성하여 다음과 같이 작성했다.
//TodoListItem.js
import React from "react";
import {
    MdCheckBox,
    MdRemoveCircleOutline,
    MdCheckBoxOutlineBlank,
} from 'react-icons/md';
import cn from 'classnames';
import './TodoListItem.scss';

const TodoListItem = () => {
    return (
        <div className="TodoListItem">
            <div className="checkbox">
                <MdcheckBoxOutlineBlank />
                <div className="text">할 일</div>
            </div>
            <div className="remove">
                <MdRemoveCircleOutline />
            </div>
        </div>
    );
};

export default TodoListItem;
  • 위의 코드에서는 다양한 아이콘을 사용했는데 그이유는 MdCheckBox 아이콘 컴포넌트는 나중에 할 일이 완료되었을 때 체크된 상태를 보여주기 위한 아이콘이다.
//TodoListItem.scss
.TodoListItem {
    padding: 1rem;
    display: flex;
    align-items: center; // 세로 중앙 정렬
    &:nth-child(even) {
        background: #f8f9fa;
    }

    .checkbox{
        cursor: point;
        flex: 1; // 차지할 수 있는 모든 영역 차지
        display: flex;
        align-items: center; // 세로 중앙 정렬
        svg {
            // 아이콘
            font-size: 1.5rem;
        }
        .text {
            margin-left: 0.5rem;
            flex: 1; // 차지할 수 있는 모든 영역 차지
        }
        // 체크되었을 때 보여줄 스타일
        &.checked {
            svg{
                color: #adb5bd;
            }
            .text {
                color: #adb5bd;
                text-decoration: line-through;
            }
        }
    }
    .remove {
        display: flex;
        align-items: center;
        font-size: 1.5rem;
        color: #ff6b6b;
        cursor: pointer;
        &:hover {
            color: #ff8787;
        }
    }

    // 엘리먼트 사이 사이에 테두리 넣기
    & + & {
        border-top: 1px solid #dee2e6;
    }
}
  • src/components 디렉터리에 TodoList.jsTodoList.scss 파일을 생성하여 다음과 같이 작성했다.
//TodoList.js
import React from "react";
import TodoListItem from "./TodoListItem";
import './TodoList.scss';

const TodoList = () => {
    return (
        <div className="TodoList">
            <TodoListItem />
            <TodoListItem />
            <TodoListItem />
        </div>
    );
};

export default TodoList;
//TodoList.scss
.TodoList {
    min-height: 320px;
    max-height: 513px;
    overflow-y: auto;
}
  • 지금은 TodoListItem을 불러와서 별도의 props 전달 없이 여러번 보여주는 코드인데, 기능을 구현할 때 수정할 예정이다.

위와 같이 기본적인 UI만 생성한 Todo-List 프로젝트의 기본적인 폴더 구조는 다음과 같다.

 📦 public
   └──📜 index.html
 📦 src
  ├──📂 components 
  │   ├──📜 TodoInsert.js
  │   ├──📜 TodoInsert.scss
  │   ├──📜 TodoList.js
  │   ├──📜 TodoList.scss
  │   ├──📜 TodoListItem.js
  │   ├──📜 TodoListItem.scss
  │   └──📜 TodoTemplate.js
  │   └──📜 TodoTemplate.scss
  ├──📜 App.js
  ├──📜 index.css
  └──📜 index.js

추후 각 컴포넌트가 실제로 동작할 수 있도록 기능을 구현해보도록 하자.❗❗

end

profile
Believe you can & you're half way there 🙏

0개의 댓글