티스토리 뷰
https://vercel.com/123456soobin-choi/test-todo
Dashboard – Vercel
The deployment that is available to your visitors.
vercel.com
React 입문 주차 시험 전체 코드
- App.js
import { useState } from "react";
import "./App.css";
function App() {
const [con, setCon] = useState(""); //새로운 값을 담을 con 초기값 선언
const [toDos, setToDos] = useState([]); //con들을 담을 배열 초기값 선언
const onChangeHandler = (event) => {
setCon(event.target.value); //input에 값 입력했을 때 value값 가져오기
};
const onCreateHandler = (event) => {
if (con === "") {
return; //아무것도 입력하지 않으면 함수 실행시키지 않음
}
setToDos([...toDos, con]); //create한 con 넣은 배열로 갈아끼우기
// setToDos((currentArray) => [con, ...currentArray]);
setCon(""); //con 초기화
};
console.log(toDos);
return (
<div className="layout">
<header>
<div className="add-form">
<input
className="content"
onChange={onChangeHandler}
type="text"
value={con}
></input>
<button className="add-button" onClick={onCreateHandler}>
Add
</button>
</div>
<h1>Todo List</h1>
</header>
<div className="list">
{toDos.map((con) => (
<div className="todo-container">{con}</div>
))}
</div>
</div>
);
}
/*toDos배열에서 con을 하나씩 각각 불러와서 container에 담아주기 */
export default App;
📌 시간이 오래 걸렸던 원인
1.
import {useState} from "react";
이걸 까먹고 안 써서 에러가 났다.
2.
onCreate event가 발생했을 때 'if-else문을 꼭 써야 한다'는 생각에 사로잡혔었다.
시험이 끝나고 생각해보니 하나의 데이터만 추가하는 것이니
setToDos([...toDos, con]);
이렇게만 써줘도 됐다.
새롭게 todo를 선언(const)하거나 else{con={con}} 이렇게 이미 선언한 변수를 가져다 써서 헷갈리고 에러가 났었다.
여러 데이터들을 하나로 묶어서 하나의 div로 return하는 것이라면 새로운 변수 todo를 선언해야 하겠지만, input 하나에 들어갈 데이터 하나만 보여주면 되고 삭제/toggle 기능이 들어가는 게 아니니 고유한 key값을 줄 필요도 없다.
+ 예외처리 - 공백 입력 방지
if (con === "") {
return; //아무것도 입력하지 않으면 함수 실행시키지 않음
}
이렇게 return을 하거나 alert("할 일을 입력해주세요")을 띄우면 된다.
3.
중괄호 { } 안에 자바스크립트 값을 넣어주어야 한다는 것은 알고 있었지만 '새로운 배열을 어떻게 넣어서 화면에 보여줘야 하는지' 이 부분이 가장 오래 걸렸다.
<div className="list">
<div className="todo-container" {con}></div>
</div>
이렇게 썼더니 todo-container 하나에 새롭게 입력하는 값들이 다 들어가 버렸다.
<div className="list">
{toDos.map((con) => (
<div className="todo-container">{con}</div>
))}
</div>
toDos 배열에서 con 을 하나씩 가져와서 div 각각에 넣어줘야 한다.
*const 초기값 선언,
onChange event가 발생했을 때 event.target 이벤트가 일어나는 객체 button에서 value를 가져오는 것,
input 입력된 후 초기화 시켜주기,
이 부분들은 다 이해됐다!
- App.css
.layout {
margin: 0 auto;
max-width: 1200px;
min-width: 800px;
}
.add-form {
margin: 0 auto;
display: flex;
justify-content: center;
padding: 30px;
}
.content {
font-size: 20px;
border-radius: 12px;
height: 40px;
padding: 0 12px;
width: 240px;
margin-right: 20px;
}
.add-button {
font-size: 20px;
background-color: teal;
border: none;
border-radius: 10px;
color: #fff;
font-weight: 700;
height: 40px;
width: 140px;
}
h1 {
text-align: center;
}
.list {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.todo-container {
border: 4px solid teal;
border-radius: 12px;
padding: 12px 24px 24px;
width: 270px;
}
'React.js' 카테고리의 다른 글
[React] React18에서 업데이트 된 기능과 추가된 hook (0) | 2023.03.30 |
---|---|
[React] 성능 최적화를 위한 리액트 렌더링 이해 session (0) | 2022.12.18 |
[React] useEffect( ) : 함수형 컴포넌트에서는 event listener를 해제할 때 (2) | 2022.11.29 |
[React] 2 way data binding (양방향 바인딩) (0) | 2022.11.28 |