다음과 같은 To-Do List를 만들어 보자.
시작 코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
<link
href="https://fonts.googleapis.com/css?family=Architects+Daughter&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/jsx"></script>
</body>
</html>
styles.css
body {
background-color: #ffeaa7;
min-height: 70vh;
padding: 1rem;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
color: hsl(198, 1%, 29%);
font-family: "Architects Daughter", cursive;
text-align: center;
font-size: 130%;
}
.container {
width: 100%;
height: auto;
min-height: 500px;
max-width: 500px;
min-width: 250px;
background: #f1f5f8;
background-image: radial-gradient(#bfc0c1 7.2%, transparent 0);
background-size: 25px 25px;
border-radius: 20px;
box-shadow: 4px 3px 7px 2px #00000040;
padding: 1rem;
box-sizing: border-box;
}
.heading {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.heading h1 {
transform: rotate(2deg);
padding: 0.2rem 1.2rem;
border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
background-color: #fdcb6e;
font-size: 1.5rem;
}
.form input {
box-sizing: border-box;
background-color: transparent;
padding: 0.7rem;
border-bottom-right-radius: 15px 3px;
border-bottom-left-radius: 3px 15px;
border: solid 3px transparent;
border-bottom: dashed 3px #fdcb6e;
font-family: "Architects Daughter", cursive;
font-size: 1rem;
color: hsla(260, 2%, 25%, 0.7);
width: 70%;
margin-bottom: 20px;
}
button {
padding: 0;
border: none;
font-family: "Architects Daughter", cursive;
text-decoration: none;
padding-bottom: 3px;
border-radius: 5px;
background-color: #ffeaa7;
}
button span {
background: #f1f5f8;
display: block;
padding: 0.5rem 1rem;
border-radius: 5px;
border: 2px solid hsl(198, 1%, 29%);
}
li {
text-align: left;
position: relative;
padding: 0.5rem;
}
Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById("root"));
App.js
import React from "react";
function App() {
return (
<div>
<div>
<h1>To-Do List</h1>
</div>
<div>
<input type="text" />
<button>
<span>Add</span>
</button>
</div>
<div>
<ul>
<li>a list</li>
</ul>
</div>
</div>
);
}
export default App;
스타일 위해 클래스 넣어주기
import React from "react";
function App() {
return (
<div className="container">
<div className="heading">
<h1>To-Do List</h1>
</div>
<div className="form">
<input type="text" />
<button>
<span>Add</span>
</button>
</div>
<div>
<ul>
<li>a list</li>
</ul>
</div>
</div>
);
}
export default App;
할 일 쓰고 add 버튼 누르면
리스트 칸에서 보이게 하기
useState(), onChange, onClick을 이용한다.
여기서 문제는 새 아이템을 입력하면 앞에 있던 아이템이 삭제된다는 것이다.
입력한 모든 아이템이 list에 보이게 해보자.
그럴려면 아이템들을 array에 담는다.
items을 array로 설정하고
들어오는 내용을 prevItems까지 모두 array에 담는다.
array에 담겨서 내용들이 모두 저장 되었기는 하나
모두 한 줄에 모여있다.
한 줄에 한 아이템씩 나오도록 해보자.
이때 필요한 것이 map() 함수이다.
items.map(()=>())
{}가 아니라 ()안에 html 태그가 들어간다.
아이템을 입력하고 나면 input 자리에 내용이 그대로 남아있다.
버튼을 누르면 input을 비워보도록 하자.
setInputText("")으로 초기화 시켜주고
input의 value를 {inputText}로 지정해 준다.
아직 이렇게 value 지정하는 이유가 잘 이해되지 않음...
어쨌든 이렇게 해줘야 작동이 된다.
input이 자동 비워졌다.
App.js
import React, { useState } from "react";
function App() {
const [inputText, setInputText] = useState("");
const [items, setItems] = useState([]);
function handleChange(event) {
const newValue = event.target.value;
setInputText(newValue);
}
function addItem() {
setItems(prevItems => {
return [...prevItems, inputText];
});
setInputText("");
}
return (
<div className="container">
<div className="heading">
<h1>To-Do List</h1>
</div>
<div className="form">
<input onChange={handleChange} type="text" value={inputText} />
<button onClick={addItem}>
<span>Add</span>
</button>
</div>
<div>
<ul>
{items.map(todoItem => (
<li>{todoItem}</li>
))}
</ul>
</div>
</div>
);
}
export default App;
'React > Keeper-app | To-Do-app clone' 카테고리의 다른 글
| [To-Do App] 최종 | input 부분 컴포넌트로 빼기 (0) | 2022.04.16 |
|---|---|
| [To-Do App] 아이템 지우기 | (0) | 2022.04.16 |
| [To-Do App] 취소선 긋기 | Component Tree | stateless component (0) | 2022.04.06 |
| [Keeper-app 2] 모든 오브젝트 메모지에 나오게 하기 (0) | 2022.03.16 |
| [Keeper-App 1] 시작 | rfce | (0) | 2022.02.21 |
댓글