배열 상태관리

AppMentors.jsx

import React, { useState } from "react";

export default function AppMentors() {
  const [person, setPerson] = useState(initialPerson);
  const handleUpdate = () => {
    const name = prompt(`누구의 이름을 바꾸고 싶은가요?`);
    const current = prompt(`이름을 무엇으로 바꾸고 싶은가요?`);

    setPerson((prev) => {
      return {
        ...prev,
        mentors: prev.mentors.map((mentor) => {
          if (mentor.name === name) {
            return { ...mentor, name: current };
          }
          return mentor;
        }),
      };
    });
  };
  const handleAdd = () => {
    const name = prompt("name?");
    const title = prompt("title?");

    setPerson((prev) => {
      return {
        ...prev,
        mentors: [...prev.mentors, { name, title }],
      };
    });
  };
  const handleDelete = () => {
    const name = prompt("name?");
    setPerson((prev) => {
      return {
        ...prev,
        mentors: prev.mentors.filter((mentor) => mentor.name !== name),
      };
    });
  };

  return (
    <div>
      <h1>
        {person.name}: {person.title}
      </h1>
      <p>{person.name}의 기술 스택</p>
      <ul>
        {person.mentors.map((mentor, index) => (
          <li key={index}>
            {mentor.name} ({mentor.title})
          </li>
        ))}
      </ul>
      <button onClick={handleUpdate}>스택 바꾸기</button>
      <button onClick={handleAdd}>스택 추가하기</button>
      <button onClick={handleDelete}>스택 삭제하기</button>
    </div>
  );
}

const initialPerson = {
  name: "유석현",
  title: "BackEnd Developer",
  mentors: [
    {
      name: "HTML",
      title: "title for HTML",
    },
    {
      name: "CSS",
      title: "title for CSS",
    },
  ],
};

View

• 기본
  

• 스택 바꾸기
  
  
  

• 스택 추가하기
  
  
  

• 스택 삭제하기