y.developer
[TIL] Day 26 React로 TodoList 만들기 2 본문
2023.11.09 목
ver 4
TodoList 만들기 1편에 이어서 나머지 코드들도 작성을 해보자.
2편에서는 header 부분의 Input 을 다룰 것이다.
많은 리팩토링을 하면서 ver4까지 만들게 되었다.
코드들이 깔끔하게 정리가 되었고, 컴포넌트도 적절하게 분리된 모습이다.
Input.jsx 작성하기
App.jsx
import './App.css';
import React, { useState } from 'react';
import Input from './Components/Input';
function App() {
const [todos, setTodos] = useState([]);
return (
<div className='outline'>
<div className='app_box'>
<header>
<Input
todos={todos}
setTodos={setTodos}
/>
</header>
.
.
.새롭게 만든 Input 컴포넌트를 불러온다.
그리고 header 안쪽에 컴포넌트를 작성해 주고 내려야 할 props를 설정한다.
Input.jsx
import React, { useState } from 'react'
import uuid from "react-uuid"
const Input = (props) => {
const { todos, setTodos } = props;
const [title, setTitle] = useState("");
const [contents, setContents] = useState("");
const addBtn = (e) => {
e.preventDefault();
const newTodo = {
id: uuid(),
title: title,
contents: contents,
isDone: false,
}
setTodos([...todos, newTodo])
setTitle("")
setContents("")
}
return (
<>
<div className='header_top'>
<h1>My Todo List</h1>
<p>React</p>
</div>
<form className='header_box'>
<div className='header_input_box_outline'>
<div className='header_input_box title'>
<p>제목</p>
<input value={title} onChange={(e) => {
setTitle(e.target.value)
}} />
</div>
<div className='header_input_box content'>
<p>내용</p>
<input value={contents} onChange={(e) => {
setContents(e.target.value)
}} />
</div>
</div>
<div>
<button className='add_btn' onClick={addBtn}>추가하기</button>
</div>
</form>
</>
)
}
export default Input초기 설정
빈 화면에서 rfce를 통해서 기본 양식을 불러온다.
아래에서 사용해야 할 useState와 uuid를 불러온다.
useState는 React에 기본적으로 포함이 되어있다.
uuid의 경우 설치를 해줘야 하는데
터미널을 열어서 yarn add react-uuid 를 입력해서 설치해 준다.
주의해야 할 점이 처음에 그냥 uuid로 설치했다가 작동을 안 해서 확인해 보니 react-uuid로 설치를 해야 했다.
jsx에 불러오는 코드는 import uuid from "react-uuid" 이고, 아래에서 uuid() 를 입력해서 사용할 수 있다.
props 선언
props를 받아서 내부에서 편하게 쓸 수 있게 선언해 준다.
특별히 선언하지 않고 접근할 수도 있다.
// 방법 1
const Input = ({ todos, setTodos }) => {}
// 방법 2
const Input = (props) => {
const { todos, setTodos } = props;
}
// 방법 3
const Input = (props) => {
props.todos // 통해서 사용
}
jsx 작성
return 안쪽에 필요한 태그를 작성하고, input과 button를 form으로 감싸준다.
form의 기본 속성을 통해서 버튼을 클릭하지 않아도 엔터를 누를 때 작동이 가능하게 해 준다.
제목을 받을 input, 내용을 받을 input, 추가하기 button을 생성한다.
제목, 내용 input
input value를 title과 contents를 받기 위해서 useState를 통해서 선언해 준다.
value와 onChange는 세트! 항상 붙어 다니는 친구다.
제목의 경우 value에 title를 작성해 주고,
onChange에 setTitle(e.target.value)를 통해서 입력값을 저장해 준다.
내용의 값도 같은 방식으로 저장해 준다.
추가하기 button
버튼에 onClick 속성을 부여해서 클릭 시 작동하게 한다.
addBtn 함수의 매개변수로 e를 설정하고 e.preventDefault()를 작성했다.
이는 form의 기본 속성인 새로고침을 방지하여 화면의 데이터가 사라지지 않게 막아준다.
todos에 새롭게 작성되는 객체가 들어갈 수 있도록 newTodo를 선언해서 값을 매칭시켜 준다.
독립적인 아이디를 부여하기 위해서 uuid를 활용한다.
이 기능을 몰랐을 때는 Date.now()를 통해서 id값을 부여했지만, uuid()가 더 편리한 것 같다.
isDone의 경우 추후 working과 done 카드를 구분하기 위해서 만든다.
title과 contents의 경우 좌우(key와 value)가 같으면 title: title, 대신 title, 로 작성할 수 있다.
하루를 마치며
리액트와 많이 친해졌다.
Todolist 같은 코드지만 10번 넘게 코드를 다뤄보며 많은 오류를 만나고 배우면서 이젠 정말 내 코드가 된 것 같다.
처음에는 컴포넌트를 넘나드는 방법이 너무 어려웠는데 이제는 props를 넘겨받고 사용하는 것이 익숙해졌다.
같은 코드를 반복해서 보는 것이 시간 낭비라고 생각할 수도 있지만,
완성도와 이해도가 50%... 70%... 90%... 99%... 100%가 될 때까지는 많은 시간과 노력이 든다.
100% 이상 이해가 된다면 그 코드는 정말 자신의 것이 된다. 그리고 절대 까먹지 않을 것이다.
오늘의 한 줄
반복의 힘!
분석 그리고 또 분석