[React] 프로젝트 ▶ TodoList ▶ 요구사항 분석, 컴포넌트 분리, UI 구현

할 일 관리 앱

 

프로젝트 구현에 앞서 먼저 앱의 요구사항을 분석하고, 이를 토대로 필요한 기능을 하나씩 구현한다. 

 

1. 요구사항 분석
2. UI 역할에 따라 컴포넌트 분리
3. UI 구현 (CSS 스타일링)

 

🌏 1. 요구사항 분석

 

1. 오늘의 날짜를 요일, 월, 일, 연도순으로 표시
2. 할 일(Todo) 작성하는 입력 폼, <추가> 버튼 클릭하면 할 일 아이템 생성
3. 생성한 아이템을 페이지 하단에 리스트로 표시, 키워드 검색으로 원하는 할 일만 추출 가능
4. 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 표시하는 체크박스, 아이템 이름, 등록 날짜, 그리고 <삭제> 버튼으로 이루어져 있다.

 

🌏 2. UI 요소를 역할에 따라 구분하여 컴포넌트 단위로 나누기

 

그리고 요구사항 분석에 맞게 페이지의 각 UI 요소를 역할에 따라 구분할 수 있도록 컴포넌트 단위로 나눈다. 컴포넌트를 적저히 분할하는 일은 개인적으로 많은 연습이 필요하다. UI 요소를 컴포넌트 단위로 생각하는 것이 중요하다.

 

• [App 컴포넌트]
• [Header 컴포넌트] : 오늘의 날짜를 표시 형식에 맞게 보여 준다.
• [TodoEditor 컴포넌트] : 새로운 할 일 아이템 등록
• [TodoList 컴포넌트] : 검색어에 맞게 필터링된 할 일 리스트를 렌더링(만약 검색 폼이 공백이면 필터링하지 않는다.)
  • [TodoItem 컴포넌트]
    1. 낱낱의 할 일 아아템에는 기본 정보 외에도 체크박스와 <삭제> 버튼이 있다.
    2. 체크 박스를 클릭하면 할 일을 마쳤는지 여부가 토글 된다.
    3. <삭제> 버튼을 클릭하면 해당 아이템 삭제

 

🌏3. UI 구현하기

 

UI 구현은 페이지의 전체 레이아웃부터 먼저 만들고, 세부 요소는 순서에 따라 차근차근 만든다.

 

1) 페이지 전체 레이아웃 설정

 

• 앱 페이지의 최대 넓이
• margin으로 가운데 정렬
• flex로 요소 배치

 

2) Header 컴포넌트 만들기

 

• Header 컴포넌트를 렌더링하려면 App 컴포넌트 자식으로 배치해야 한다.

 

📌 new Date().toDateString()

현재 날짜와 시간을 저장하는 Date 객체 만들고,
toDateString() 메서드 이용해 날짜를 문자열로 표시

💡 new Date() :

Date 객체를 활용하면 특정 게시물의 생성 시간을 저장하거나 오늘의 날짜를 출력하거나 타이머를 만드는 등 시간과 관련된 기능을 쉽게 구현할 수 있다. Date 객체는 리터럴 문법이 아닌 생성자 문법으로만 만들 수 있다. 생성자인 Date()에 아무런 인수도 전달하지 않으면 생성 당시의 시간, 즉 현재의 날짜와 시간이 저장된 Date 객체를 반환.

 

3) TodoEditor 컴포넌트 만들기

 

• TodoEditor 컴포넌트를 렌더링하려면 App 컴포넌트 자식으로 배치해야 한다.
• <input> 할 일 아이템을 생성하는 입력 폼
• <button> 클릭하면 실제 할 일 아이템을 생성하는 버튼

 

4) TodoList, TodoItem 컴포넌트 만들기

 

[TodoList 컴포넌트]

• TodoList에는 TodoItem 컴포넌트가 여러 개 있다.
• TodoList를 App 컴포넌트의 자식으로 배치한다.
• Todo 컴포넌트
  • 할 일 아이템을 조회하는 검색 폼
  • 조회한 할 일 아이템을 목록 형태로 보여주는 리스트
  • 검색 결과에 따라 TodoItem 컴포넌트를 리스트로 페이지에 렌더링해야 함

 

[TodoItem 컴포넌트]

 

• TodoList에서 낱낱의 할 일 아이템을 표현하는 TodoItem 컴포넌트
  • 할 일 완료 여부를 표시하는 체크박스 배치
  • 사용자가 작성한 할 일을 렌더링할 요소 배치
  • 할 일 아이템이 작성된 시간을 렌더링할 요소 배치
  • 할 일 삭제 버튼

 

[TodoList에 TodoItem 컴포넌트 배치]

 

import "./List.css";
import TodoItem from './TodoItem';

const List = () => {
    return (
        <div className='List'>
            <h4>Todo List 🏠</h4>
            <input placeholder='검색어를 입력하세요' />
            <div className='todos_wrapper'> 📌
                <TodoItem />
                <TodoItem />
                <TodoItem />
            </div>
        </div>
    );
}

export default List;

 

• 여러 개의 할 일 아이템을 리스트로 보여줄 <div> 태그 요소를 배치한다. 지금은 보여줄 할 일 아이템이 없으므로 임시로 그 역할을 수행할 컴포넌트 TodoItem을 3개 배치한다.
• TodoItem을 감싸고 있는 todos_Wrapper에 스타일링을 적용해야 한다.

 

 

 

📕출처: 한 입 크기로 잘라먹는 리액트_이정환