React로 간단한 ToDo List 만들기 (#3 전체적인 틀 개발)

1. 전체적인 틀 개발

기능 구현전에 대략적으로 UI를 개발한다.

 

1.1. 디렉토리 구조

디렉토리는 아래와 pages와 components로 구성한다.

• pages는 화면 단위로 jsx 파일 생성
• components에는 화면을 구성하는 component를 단위로하여 jsx 파일 생성

현재는 하나의 페이지만 있어도 되지만, 추후에 여러개의 페이지가 생길 수도 있으니 pages 디렉토리를 따로 만들었다.

 

1.2. 개발할 페이지와 컴포넌트 리스트업

• Pages
  • Home: 첫 화면 (ToDo List를 보여줌)
• Components
  • ToDo Item 입력을 받을 수 있는 컴포넌트
  • ToDo Item 리스트 컴포넌트 (ToDo Item 컴포넌트들을 포함)
  • ToDo Item 컴포넌트

 

2. 개발 시작

2.1. jsx 파일 생성

아래와 같이 components와 pages 하위에 JSX 파일을 생성했다

디렉토리 구조

 

2.1.1. App.js

페이지를 렌더링한다. 본 프로젝트에서는 하나의 페이지만 필요하여 아래와같이 Home.jsx만 렌더링한다.

(추후에 기능이 고도화되면 라우팅하는 기능을 넣는다)

      

      

      

    
    

      <javascript />
    
import React from 'react';
import Home from './pages/Home';

// 추후에 기능이 고도화되면 라우팅하여 여러개의 페이지를 관리
const App = () => <Home />;

export default App;

 

2.1.2. Home.jsx

화면 기획서와 같이 위에서 부터 입력창, '할 일' 목록, '완료한 항목' 목록으로 구성한다.

• 화면기획서: 2021.07.12 - [React] - React로 간단한 ToDo List 만들기 (#2 기획 및 화면 구성)

      

      

      

    
    

      <javascript />
    
import React from 'react';
import InputBox from '../components/InputBox';
import ToDoItemList from '../components/ToDoItemList';

const Home = () => (
  <div className="homepage__container">
    {/* ToDo Item을 추가할 수 있는 input 박스 */}
    <InputBox />

    {/* 할 일 Item 리스트 */}
    <ToDoItemList />

    {/* 완료한 Item 리스트 */}
    <ToDoItemList />
  </div>
);

export default Home;

 

참고로 React에서는 태그에 class를 추가할때 className을 사용한다.

 

2.1.3. InputBox.jsx

Item을 입력 받을 수 있도록 input과 button으로 구성한다.

      

      

      

    
    

      <javascript />
    
import React from 'react';

const InputBox = () => (
  <div className="todoapp__inputbox">
    {/* 아이템 내용 입력 input */}
    <input
      type="text"
      name="todoItem"
      placeholder="할 일을 입력해주세요"
      className="todoapp__inputbox-inp"
    />
    {/* 입력 후 아이템 추가 버튼 */}
    <button type="submit" className="todoapp__inputbox-add-btn">
      추가
    </button>
  </div>
);

export default InputBox;

 

2.1.4. ToDoItemList.jsx

ToDoItem을 포함하여 리스트 형태로 구현한다.

지금은 하드코딩으로 3개를 넣었지만, 기능 개발시에는 map으로 컴포넌트를 생성하여 렌더링한다.

      

      

      

    
    

      <javascript />
    
import React from 'react';
import ToDoItem from './ToDoItem';

const ToDoItemList = () => (
  <div className="todoapp__list">
    <p className="todoapp__list-tit">제목</p>
    {/* 기능 구현 전, 임시로 아래와 같이 작성. 기능 개발시에는 map으로 컴포넌트 반환 */}
    <ul className="todoapp__list-ul">
      <ToDoItem />
      <ToDoItem />
      <ToDoItem />
    </ul>
  </div>
);

export default ToDoItemList;

 

2.1.5. ToDoItem.jsx

각 아이템에는 체크박스, 내용, 수정/삭제 버튼이 존재하도록 구현

      

      

      

    
    

      <javascript />
    
import React from 'react';

const ToDoItem = () => (
  <li className="todoapp__item">
    {/* 아이템 완료 체크 / 체크 해제를 위한 체크박스 */}
    <input type="checkbox" className="todoapp__item-checkbox" />
    {/* 아이템 내용 */}
    <span className="todoapp__item-ctx">ToDo Item</span>
    {/* 수정 버튼 */}
    <button type="button" className="todoapp__item-edit-btn">
      ✏
    </button>
    {/* 삭제 버튼 */}
    <button type="button" className="todoapp__item-delete-btn">
      🗑
    </button>
  </li>
);

export default ToDoItem;

 

위 처럼 작성하면 아래와 같이 화면이 만들어진다. css를 이용하여 스타일을 입히자

화면 UI

 

2.2. css 작성

      

      

      

    
    

      <css />
    
/* Home Page Container */
.homepage__container {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 0;
}

/* ToDo App Input Box */
.todoapp__inputbox {
  width: 100%;
  display: flex;
  align-items: center;
}
.todoapp__inputbox-inp {
  flex: 1;
  border: none;
  border-bottom: 1px solid #f1f3f5;
  padding: 10px;
  height: 50px;
  box-sizing: border-box;
}
.todoapp__inputbox-inp:focus {
  outline: none;
}
.todoapp__inputbox-add-btn {
  border: none;
  border-radius: 0;
  background-color: #d0ebff;
  color: #1c7ed6;
  height: 50px;
  width: 50px;
  font-weight: bold;
}

/* ToDo Item List */
.todoapp__list {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}
.todoapp__list-tit {
  font-weight: bold;
  margin: 0;
}
.todoapp__list-ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

/* ToDo Item */
.todoapp__item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  height: 36px;
}
.todoapp__item:last-child {
  margin-bottom: 0;
}
.todoapp__item-checkbox {
  margin-right: 10px;
}
.todoapp__item-ctx {
  flex: 1;
}
.todoapp__item-edit-btn,
.todoapp__item-delete-btn {
  border: none;
  border-radius: 0;
  height: 36px;
  width: 36px;
  background-color: inherit;
}
.todoapp__item-edit-btn:hover,
.todoapp__item-delete-btn:hover {
  cursor: pointer;
  background-color: #d0ebff;
}
.todoapp__item-edit-btn {
  margin-right: 3px;
}

 

(디자인 능력은 없어서.. 이 정도가 최선인듯하다..)

ToDo App 대략적인 틀 완성

 

색상은 아래 사이트에서 참고하여 가져왔다. (개발할때 자주 사용하는 사이트)

https://yeun.github.io/open-color/

Open Color

 

전체 코드는 아래 링크에서 확인 할 수 있습니다.

https://github.com/bluemiv/react_todo_app

GitHub - bluemiv/react_todo_app: React로 만든 ToDo Web Application