[React] 입문 주차 시험

https://vercel.com/123456soobin-choi/test-todo

Dashboard – Vercel

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;
}