항해 18일차 (redux 연습)

항해 18일차

오늘은 그 동안 공부 했던 리액트 입문을 토대로 테스트를 보았다.

테스트의 내용은 input 창에 입력을 하고 추가하기 버튼을 누르면 추가되어 리스트들이 가로로 나오는 것을 구현하는 것이다.

내가 구현한 코드를 보자면

import React from "react";
import { useState } from "react";
import "./App.css";
function App() {
  const [users, setUser] = useState([{ id: 1, title: "이동언" }]);

  const [title, setTitle] = useState("");

  const titlechange = (e) => {
    setTitle(e.target.value);
  };

  const addbtn = () => {
    // 추가 버튼
    const newUsers = {
      id: users.length + 1, // 추가를 하기위해 길이 +1
      title: title,
    };
    setUser([...users, newUsers]);
    setTitle("");
  };

  return (
    <div className="layout">
      <div className="container">
        <input type="text" value={title} onChange={titlechange} />
        <button onClick={addbtn}>추가하기</button>
      </div>
      <div className="listh2">Todo List</div>
      <div className="list">
        {users.map((user) => {
          return <div className="listbox">{user.title}</div>;
        })}
      </div>
    </div>
  );
}

export default App;

배포 : https://add-ochre.vercel.app/

먼저 useState 함수를 사용하여 users와 title이라는 두 개의 state 변수를 생성한다. users 변수는 할 일 목록을 저장하고, title 변수는 새로운 할 일의 제목을 입력하는 데 사용된다.

그리고 titlechange 함수는 onChange 이벤트 핸들러로 연결되어 input 요소에서 입력된 값을 title state 변수에 저장한다.

addbtn 함수는 onClick 이벤트 핸들러로 연결되어 버튼을 클릭하면 실행된다. 이 함수는 users state 변수에 새로운 할 일 항목을 추가하고, title state 변수를 초기화한다.

이후 return 구문에서는 input 요소와 button 요소를 렌더링하고, users state 변수를 사용하여 할 일 목록을 표시한다. users.map 함수를 사용하여 users 배열에서 각각의 할 일 항목에 대한 JSX 요소를 생성한다.

마지막으로, export default 구문을 사용하여 App 컴포넌트를 내보내고 있다. 이 컴포넌트는 Todo List 애플리케이션의 레이아웃과 동작을 정의합니다.

모범답안

import { useState } from "react";
import "./App.css";

function App() {
  const [title, setTitle] = useState("");
  const [todos, setTodos] = useState([
    {
      id: 1,
      title: "react를 배워봅시다.",
    },
  ]);
  return (
    <div className="container">
      <input
        type="text"
        value={title}
        onChange={(event) => {
          setTitle(event.target.value);
        }}
      />
      <button
        onClick={() => {
          setTodos([...todos, { id: todos.length + 1, title: title }]);
        }}
      >
        추가하기
      </button>

      <h1>Todo List</h1>
      <div className="todos-container">
        {todos.map((todo) => (
          <div className="todo" key={todo.id}>
            {todo.title}
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

다행히 모범답안이랑 비교했을 때 거의 비슷해서 좋았다. 🔥