프론트엔드 개발일지 #36 - 스탠다드반 실습 예제

스탠다드반 실습 예제를 통해서, 한번 쭉 복습을 해보기로 했다.

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

function App() {
  const initialState = [
    { id: 1, name: "John", age: 20 },
    { id: 2, name: "Doe", age: 21 },
  ];
  const [users, setUsers] = useState(initialState);

  // TODO: 이름과 나이를 각각 상태로 정의하세요. 초기값은 빈문자열("")입니다.
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  const addUser = (e) => {
    e.preventDefault();
    // TODO: 이름과 나이가 모두 입력되지 않았을 때는 alert 처리하고 함수를 종료하세요. 논리합연산자 (||) 를 이용하세요.
    if (name === "" || age === "") {
      return alert("이름과 나이 모두 입력해주세요.");
    }

    // TODO: 사용자 리스트 상태를 업데이트 하세요. spread operator 를 사용하고, 추가되는 id는 현재 시간을 밀리초 단위로 반환하는 Date.now() 를 사용하세요.
    setUsers([
      ...users,
      {
        name: name,
        age: parseInt(age),
        date: Date.now(),
      },
    ]);
  };

  const removeUser = (id) => {
    // TODO: filter 메소드를 사용해서 사용자 삭제 로직을 구현해 보세요.
    const updatedUsers = users.filter((user) => user.id !== id);
    setUsers(updatedUsers);
  };

  return (
    <>
      <h1>사용자 리스트</h1>
      <form onSubmit={addUser}>
        {/* TODO: input 태그에 value, onChange 속성을 추가해서 이름과 나이의 상태와 상태변경 로직을 연결하세요 */}
        <input
          type="text"
          placeholder="이름"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="number"
          placeholder="나이"
          value={age}
          onChange={(e) => setAge(e.target.value)}
        />
        <button type="submit">사용자 추가</button>
      </form>
      <ul>
        {/* map을 사용해서 사용자 리스트를 불러오자 */}
        {users.map((user) => (
          <li
            key={user.id}
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginBottom: "10px",
            }}
          >
            <span>
              이름: {user.name}, 나이: {user.age}
            </span>
            {/* 삭제를 구현해보자 */}
            <button onClick={() => removeUser(user.id)}>삭제</button>
          </li>
        ))}
      </ul>
    </>
  );
}

export default App;

➡️ 완성본

배열메서드를 복습 할 수 있는 시간이 됐다. 그리고 조금 헷갈리는 부분도 다시 생각 할 수 있어서 state와 props가 헷갈리면 이 예제를 다시 풀어보면 좋을 것 같다 😯