[React] TodoList 만들어보기 - 1

방학도 2주밖에 안 남았고 개강하기 전까지 간단하게 머라도 만들어보고 싶어서 

 

웹 개발을 하는 사람이라면 누구나 만들어보는 TodoList를 한번 만들어보자. 디자인쪽으로는 영 아니기 때문에

 

디자인은 크게 들어가지 않고 기능적인 요소만 우선시 되는 TodoList를 만들어볼 것이다.

 

개발환경은 React, module.css 정도만 될 것이고  협업을 할 것도 아니기 때문에 github사용은 나중에 다 완성하고 나서

 

업로드하는 용도로만 사용될 예정이다. 스텝별로 개발을 해 나갈 것이기 때문에 처음에는 정적인 페이지로 TodoList를 만들어보고

 

그 이후에 날짜, Todo 추가, Todo 삭제 등등의 기능을 차례대로 추가해갈 것이다. 

 

<Todo.jsx>

import { useState } from 'react';

import styles from './Todo.module.css';

export default function Todo() {

const [text, setText] = useState(['헬스장 가기', '점심 약속', '회의하기', '공부하기', '12시 취침']);

const [checked, setChecked] =useState(Array(text.length).fill(false));

function handleCheckBox(index) {

const updateChecked = checked.map((item, i) => index === i ? !item : item);

setChecked(updateChecked);

}

return(<div className={styles.wrap}>

<div className={styles.topBox}>

<div>❰</div>

<div>ThursDay, August 15</div>

<div>❱</div>

</div>

<div>

{

text.map((item, index) => {

 

return (

<div className={styles.todoList}>

<input

type='checkbox'

checked = {checked[index]}

onChange={() => handleCheckBox(index)}

/>

<p style={{textDecoration: checked[index] ? "line-through" : "none" }}>{item}</p>

</div>

)

})

}

</div>

</div>)

}

 

 

<Todo.module.css>

 

.wrap {

height: auto;

width: 500px;

background-color: white;

display: flex;

flex-direction: column;

}

.topBox {

display: flex;

height: 40px;

justify-content: space-between;

padding: 5%;

font-weight: bold;

font-size: 25px;

border-bottom: 1px solid rgb(185, 185, 185);

}

.todoList {

display: flex;

margin-left: 5%;

gap : 4%;

 

}

 

먼저 ToodList component이다. wrap div로 전체적인 크기를 잡은 다음에 2개의 div를  flex-direction : column을 주어

 

세로 배열을 만들어놨다. 윗칸에는 날짜와 arrow 기호가 있고 위 날짜는 매일 바뀌게 만들 예정이다. 

 

아래칸은 Todo(할 일)를 확인하는 칸으로 체크박스를 두어 체크표시를 하게 되면 취소선이 생겨서 완료됐다고 인식할 수 있게

 

만들어놓았다. 지금까지 정적으로 만들어놓은 페이지이고 이 다음부터 차근차근 개발을 해보겠다.

 

추가해야 할 기능 :

1. 날짜의 동적인 변화

2. Todo 추가 기능

3. Todo 삭제 기능