React.js (6)

todoapp 폴더를 만들고, react 프로젝트를 생성해봅시다.
D:\node.js\React\todoapp> create-react-app .

📌  폴더명에 대문자 들어가면 설치가 안된다 ! 

프로젝트에서 필요한 라이브러리도 설치
npm install sass classnames react-icons

react 실행
npm run start

TodoTemplate
Todoinsert
TodoList
TodoItem

으로 구성할 계획입니다.

TodoTemplate

todoapp\src\components 폴더 생성
📌 사용자 컴포넌트들은 별도의 폴더를 만들어서 저장하는 것이 관례

하위에 TodoTemplate.js, TodoTemplate.css 생성

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 {
    width: 512px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6rem;
    border-radius: 4px;
    overflow: hidden;
    
    .app-title {
        background: #22b8cf;
        color: white;
        height: 4rem;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content {
        background: white;
    }
}

TodoInsert

components\ 하위에 TodoInsert.js, TodoInsert.css 생성하자.

TodoInsert.js

import {MdAdd} from 'react-icons/md';
import './TodoInsert.scss';

const TodoInsert = ({children}) => {
    return(
        <form className = 'TodoInsert'>
            <input placeholder = '할 일을 추가하세요'></input>
            <button type = 'submit'>
                <MdAdd/>
            </button>
        </form>
    );
}

export default TodoInsert;

> React Icons < 에서 아래의 icon을 사용한다는 뜻

마음에 들지않으면 맘에 드는 것으로 바꾸자.

TodoInsert.scss

.TodoInsert {
    display: flex;
    background: #495057;
    
    input {
        background: none;
        outline: none;
        border: none;
        padding: 0.5rem;
        font-size: 1.135rem;
        line-height: 1.5;
        color: white;
        flex: 1;
    }

    button {
        background: none;
        outline: none;
        border: none;
        padding: 0.5rem;
        color: white;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1.5rem;
        align-items: center;
        cursor: pointer;
        &:hover {
            background: #adb5bd;
        }
    }
}

TodoList

---

TodoListItem

TodoList에 들어갈 item 작성

components 하위에 TodolistItem.js, TodolistItem.scss 생성

TodolistItem.js

import {
    MdCheckBoxOutlineBlank,
    MdCheckBox,
    MdRemoveCircleOutline
} from 'react-icons/md';

import './TodoListItem.scss';

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

export default TodoListItem;