1. Components 구성
Header.jsx
Editor.jsx
List.jsx


본격적인 UI에 들어가기 앞서 Header, Editor, List 컴포넌트들로 구성해주고
App.css 스타일을 이용해 중앙으로 배치 시켜줬다.
App.css
.App {
width: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap : 10px;
}
💡 gap은 display: flex 요소일 경우에만 사용 가능
2. Header 컴포넌트 UI
텍스트와 현재 날짜를 넣어준다.

Header.jsx
import "./Header.css";
const Header = () => {
return (
<div className="Header">
<h3>오늘은 👀</h3>
<h1>{new Date().toDateString()}</h1>
</div>
);
};
export default Header;
💡 new Date().toDateString() : Date 객체를 사용하여 현재 날짜를 간단하게 화면에 표시하는 코드
- new Date():
- 현재 날짜와 시간을 나타내는 Date 객체를 생성한다.
- 사용자의 로컬 시스템 시간을 기반으로 한다.
- .toDateString():
- Date 객체를 사람이 읽기 쉬운 날짜 문자열로 변환한다.
- 예를 들어, Mon Jan 21 2025 형식으로 반환한다.
Header.css
.Header > h1 {
color: rgb(12, 220, 247);
}
이렇게 Header 컴포넌트 UI를 완성 시켜줬다.
3. Editor 컴포넌트 UI
새로운 Todo list 추가를 위한 텍스트 입력창과 "추가" 버튼을 생성해준다.

Editor.jsx
import "./Editor.css"
const Editor = () => {
return (
<div className="Editor">
<input placeholder="새로운 Todo..."/>
<button>추가</button>
</div>
);
};
export default Editor;
TodoList 할일을 추가할 때 필요한 input 요소와 button 요소를 생성시켜줬다.
Editor.css
.Editor {
display: flex;
gap: 10px;
}
.Editor input {
flex: 1;
padding: 15px;
border: 1px solid rgb(220, 220, 220);
border-radius: 5px;
}
.Editor button {
cursor: pointer;
width: 80px;
border: none;
background-color: rgb(255, 154, 196);
color: white;
border-radius: 5px;
}
이렇게 Editor 컴포넌트의 UI를 완성 시켜줬다.
4. List 컴포넌트 UI
TodoList 검색을 위한 검색어 창과 추가한 TodoList 의 목록들을 나열시켜주도록 만들어준다.

List.jsx
import "./List.css"
import TodoItem from "./TodoItem";
const List = () => {
return (
<div className="List">
<h4>TodoList ✍️</h4>
<input placeholder="검색어를 입력하세요" />
<div className="todos_wrapper">
<TodoItem />
<TodoItem />
<TodoItem />
</div>
</div>
);
};
export default List;
List.css
.List {
display: flex;
flex-direction: column;
gap: 20px;
}
.List > input {
width: 100%;
border: none;
border-bottom: 1px solid rgb(220,220,220);
padding: 15px 0px;
}
.List > input:focus {
outline: none;
border-bottom: 1px solid rgb(12, 220, 247);
}
.List .todos_wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
일단, 검색어 텍스트 창부터 만들어줬다.
그리고 List.jsx에 TodoItem을 자세히 보면 똑같은 UI 구성을 갖는 것을 볼 수 있다.
그렇기에 TodoItem이라는 컴퍼넌트를 따로 만들어 props를 바꿔가면서 반복적으로 렌더링 시켜주면 될 것 같다.

TodoItem.jsx
import "./TodoItem.css";
const TodoItem = () => {
return (
<div className="TodoItem">
<input type="checkbox" />
<div className="content"> Todo... </div>
<div className="date"> Date </div>
<button> 삭제 </button>
</div>
);
}
export default TodoItem;
TodoItem에 들어 갈 checkbox, content, date, 삭제 UI 를 만들어준다.
TodoItem.css
.TodoItem {
display: flex;
align-items: center;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid rgb(240, 240, 240);
}
.TodoItem input {
width: 20px;
}
.TodoItem .content {
flex: 1;
}
.TodoItem .date {
font-size: 14px;
color: gray;
}
.TodoItem button {
cursor: pointer;
color: gray;
font-size: 14px;
border: none;
border-radius: 5px;
padding: 5px;
}
이렇게 List 컴포넌트의 UI 까지 완성시켜줬다.

다음부터는 CRUD 기능 구현을 목표로 투두리스트의 모습을 갖춰 볼 것이다.
'혼자 이것저것 공부해보는 > TodoList' 카테고리의 다른 글
| [TodoList] React 성능 최적화 (0) | 2025.02.04 |
|---|---|
| [TodoList] useState에서 useReducer로 리팩토링하기 (0) | 2025.01.30 |
| [TodoList] Update, Delete - Todo 수정하기, 삭제하기 (0) | 2025.01.24 |
| [TodoList] Create & Read - Todo 추가 및 Todo List 렌더링하기 (0) | 2025.01.22 |
| [TodoList] 기능 구현 준비하기 (1) | 2025.01.21 |