7a. 투두리스트 UI 구현하기

이제 어떤 컴포넌트들이 필요한지 알았으니, 하나씩 만들어봅시다.

우선 파일들을 먼저 생성하세요:

App 컴포넌트 UI 작성

App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="header">
          <h1>오늘 뭐할까?</h1>
        </div>
        <div className="white-box" />
      </div>
    );
  }
}

export default App;

스타일도 작성합시다

.App {
  width: 600px;
  margin: 0 auto;
  margin-top: 3rem;
  box-shadow: 0px 20px 150px #809baf;
}

.App .header {
  background: #3bc9db;
  color: white;
  padding: 2rem;
}

.App .header h1 {
  margin: 0;
  text-align: center;
  font-weight: 300;
}

.App .white-box {
  background: white;
  padding: 2rem;
  min-height: 8rem;
  max-height: 25rem;
  overflow-y: auto;
}

배경색도 설정해봅시다

index.css

body {
  background: #f1f3f5;
}

index.js

import React from "react";
import { render } from "react-dom";
import App from "./App";
import './index.css';

render(<App />, document.getElementById("root"));

index.css 를 index.js 에서 불러와서 방금 작성한 스타일을 적용하세요.

컴포넌트 파일 생성

우선 다음 파일들을 생성하세요:

• components/CreateForm.js
• components/CreateForm.css
• components/TodoList.js
• components/TodoItem.js
• components/TodoItem.css

그리고, 컴포넌트 자바스크립트 파일들의 기본적인 틀만 만들어주겠습니다.

components/CreateForm.js

import React, { Component } from 'react';
import './CreateForm.css';

class CreateForm extends Component {
  render() {
    return <form>CreateForm</form>;
  }
}

export default CreateForm;

components/TodoItem.js

import React from 'react';
import './TodoItem.css';

const TodoItem = () => <div>TodoItem</div>;

export default TodoItem;

components/TodoList.js

import React, { Fragment } from 'react';
import TodoItem from './TodoItem';

const TodoList = () => {
  // Fragment 는, JSX 를 감싸고 싶은데 따로 DOM 엘리먼트를 만들고싶지 않을 때 사용합니다.
  return (
    <Fragment>
      <TodoItem />
      <TodoItem />
      <TodoItem />
    </Fragment>
  );
};

export default TodoList;

그 다음에 App.js 에서 CreateForm 과 TodoList 를 렌더링하겠습니다.

App.js

import React, { Component } from 'react';
import CreateForm from './components/CreateForm';
import TodoList from './components/TodoList';

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="header">
          <h1>오늘 뭐할까?</h1>
        </div>
        <CreateForm />
        <div className="white-box">
          <TodoList />
        </div>
      </div>
    );
  }
}

export default App;

여기까지 진행하면 이러한 상태가 됩니다

그럼, 각 컴포넌트들의 UI 를 구현해볼까요?

CreateForm 컴포넌트

자바스크립트 작성

import React, { Component } from 'react';
import './CreateForm.css';

class CreateForm extends Component {
  render() {
    return (
      <form className="CreateForm">
        <input placeholder="오늘 뭐하지..?" />
        <button type="submit">추가</button>
      </form>
    );
  }
}

export default CreateForm;

스타일 작성

.CreateForm {
  padding: 2rem;
  background: #343a40;
  display: flex;
}

.CreateForm input {
  /* 스타일 초기화 */
  background: transparent;
  border: none;
  outline: none;

  flex: 1;
  border-bottom: 1px solid #e9ecef;
  color: white;
  font-size: 1.25rem;
}
.CreateForm input::placeholder {
  color: #adb5bd;
}

.CreateForm button {
  /* 스타일 초기화 */
  background: transparent;
  border: none;
  outline: none;

  margin-left: 1rem;
  padding: 0.5rem;
  background: white;
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 4px;
}

.CreateForm button:hover {
  background: #f1f3f5;
}

TodoItem 컴포넌트

자바스크립트 작성

import React from 'react';
import './TodoItem.css';

const TodoItem = () => (
  <div className="TodoItem">
    <div className="check">&#10004;</div>
    <div className="text">내용</div>
    <div className="remove">[지우기]</div>
  </div>
);

export default TodoItem;

스타일 작성

.TodoItem {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  align-items: center; /* 세로 중앙 정렬 */
  cursor: pointer;
}

.TodoItem + .TodoItem {
  border-top: 1px solid #e9ecef;
}

.TodoItem .check {
  font-size: 1.25rem;
  color: #dee2e6;
  opacity: 0;
}

.TodoItem:hover .check {
  opacity: 1;
}

.TodoItem.active .check {
  opacity: 1;
  color: #22b8cf;
}

.TodoItem.active .text {
  text-decoration: line-through;
  color: #adb5bd;
}

.TodoItem .text {
  flex: 1;
  margin-left: 1rem;
  font-size: 1.5rem;
}

.TodoItem .remove {
  color: #ff6b6b;
  opacity: 0;
}

.TodoItem .remove:hover {
  text-decoration: underline;
  cursor: pointer;
}

.TodoItem:hover .remove {
  opacity: 1;
}

여기까지 다 하고 나면 컴포넌트의 UI 가 제대로 보여질 것입니다.