일정 관리 웹 어플리케이션 만들기 (1)

https://ko.wikipedia.org

<"리액트를 다루는 기술" 책 참조>

---

UI 구성하기

1. 프로젝트 생성

//todo-app 프로젝트 생성
npm create react-app todo-app

//Sass, 조건부 스타일링, 아이콘 라이브러리 설치
cd todo-app
npm add node-sass classnames react-icons

2. Prettier 설정

//최상단 .prettierrc파일 생성
{
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80
}

3. index.css 수정

/* src > index.css 수정 */
body {
  margin: 0;
  padding : 0;
  background : #e9ecef;
}

4. App 컴포넌트 초기화

import React from 'react';

const App = () => {
  return (
    <div>TODO APP</div>
  );
};

export default App;

5. TodoTemplate 컴포넌트

• 화면을 가운데에 정렬시켜 주며, 앱 타이틀(일정 관리)를 보여 줍니다.
• children으로 내부 JSX를 props로 받아 와서 랜더링해 줍니다.

components 폴더 생성

 

src > components > TodoTemplate.js

import React from 'react';
import './TodoTemplate.scss';

const TodoTemplate = ({ children }) => {
    return (
        <div className="TodoTemplate">
            <div className="app-title">일정 관리</div>
            <!-- 태그 사이의 내용을 보여주는 props - children 사용 -->
            <div className="content">{children}</div>
        </div>
    );
};

export default TodoTemplate;

src > components > TodoTemplate.scss

.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;
    }
}

src > App.js

import React from 'react';
import TodoTemplate from './components/TodoTemplate';

const App = () => {
  return (
  	<!-- 태그 사이의 내용을 보여주는 props - children 사용 -->
    <TodoTemplate>TODO APP</TodoTemplate>
  );
};

export default App;

 

 

6. TodoInsert 컴포넌트

• 새로운 항목을 입력하고 추가할 수 있는 컴포넌트.
• state를 통해 인풋의 상태를 관리

src > components > TodoInsert.js

import React 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;

src > components > 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;
        color : white;
        padding-left : 1rem;
        padding-right : 1rem;
        font-size : 1.5rem;
        display : flex;
        align-items: center;
        cursor: pointer;
        transition : 0.1s background ease-in;
        
        &:hover {
            background : #adb5db;
        }
    }
}

src > App.js

import React from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';

const App = () => {
  return (
    <TodoTemplate>
      <TodoInsert />
    </TodoTemplate>
  );
};

export default App;

<아이콘 사용 https://react-icons.github.io/react-icons/icons?name=md>

import { IconName } from "react-icons/md";

 

7. TodoList 컴포넌트

• todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러 개의 TodoListItem 컴포넌트로 반환하여 보여줌.

src > components > 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;

src > components > TodoList.scss

.TodoList {
    min-height: 320px;
    max-height: 513px;
    overflow-y: auto;
}

src > components > App.js

import React from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';

const App = () => {
  return (
    <TodoTemplate>
      <TodoInsert />
      <TodoList />
    </TodoTemplate>
  );
};

export default App;

 

8. TodoListItem 컴포넌트

• 각 할 일 항목에 대한 정보를 보여 주는 컴포넌트
• todo 객체를 props로 받아 와서 상태에 따라 스타일의 UI를 보여줌

src > components > TodoListItem.js

import React from 'react';
import {
    MdCheckBoxOutlineBlank,
    MdCheckBox,
    MdRemoveCircleOutline
} from 'react-icons/md';
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;

src > components > TodoListItem.scss

.TodoListItem {
    padding : 1rem;
    display : flex;
    align-items : center;
    
    &:nth-child(even) {
        background: #f8f9fa;
    }

    .checkbox {
        cursor : pointer;
        flex : 1;
        display : flex;
        align-items : center;

        svg {
            font-size : 1.5em;
        }

        .text {
            margin-left : 0.5em;
            flex : 1;
        }

        &.checked {
            svg {
                color : #eeb8cf;
            }

            .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.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;