CRUD 기능 (올림픽 메달 추가, 수정 및 삭제 기능)

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

function App() {
  const style = {
    display: "flex",
    gap: "12px",
    padding: "50px",
  };

  // 국가 정보 저장
  const [countries, setCountries] = useState([]);

  // 입력 후 필드 상태
  const [countryName, setCountryName] = useState("");
  const [goldMedal, setGoldMedal] = useState(0);
  const [silverMedal, setSilverMedal] = useState(0);
  const [bronzeMedal, setBronzeMedal] = useState(0);

  // 국가 추가 함수
  const addCountry = () => {
    const newCountry = {
      // 고유 ID 생성
      id: countries.length + 1,
      name: countryName,
      gold: Number(goldMedal),
      silver: Number(silverMedal),
      bronze: Number(bronzeMedal),
    };

    // 필드 업데이트 및 재초기화
    setCountries([...countries, newCountry]);

    setCountryName("");
    setGoldMedal(0);
    setSilverMedal(0);
    setBronzeMedal(0);
  };

  // 국가 삭제 함수

  // id와 동일한 국가들 삭제

  //  새로운 국가 리스트를 업데이트
  const deleteCountry = (id) => {
    setCountries(countries.filter((country) => country.id !== id));
  };

  // 인풋 스타일
  // (국가 이름 tbx, 메달 number 스타일)
  const inputStyle = {
    width: " 100px",
    height: "20px",
    marginRight: "10px",
    fontSize: "18px",
  };
  // (추가 btn 스타일)
  const btnStyle = {
    width: "100px",
    marginRight: "10px",
  };

  // 메달 수정 함수
  const updateCountry = () => {
    const newArray = countries.map(function (country) {

     // 나라이름이 동일할 경우
      if (countryName === country.name) {
        return {

        // 수정
          id: countries.length + 1,
          name: countryName,
          gold: Number(goldMedal),
          silver: Number(silverMedal),
          bronze: Number(bronzeMedal),
        };
      } else {

     // 나라이름이 동일하지 않을 경우

        // 반응 없음
        return country;
      }
    });
        // (변경 사항) 배열로 출력
    setCountries(newArray);
  };

  return (
    <>
      <div className="container">
        {/* '2024~' 문구 */}
        <h4 style={{ fontSize: "2.5rem", marginBottom: "4.5rem" }}>
          2024 파리 올림픽 메달 조회
        </h4>
        {/* 국가 이름 입력 */}
        <input
          type="text"
          style={inputStyle}
          value={countryName}
          onChange={(e) => setCountryName(e.target.value)}
          placeholder="국가 이름"
        />
        {/* 금메달 수 입력 */}
        <input
          type="number"
          style={inputStyle}
          value={goldMedal}
          onChange={(e) => setGoldMedal(e.target.value)}
          placeholder="금메달 수"
        />
        {/* 은메달 수 입력 */}
        <input
          type="number"
          style={inputStyle}
          value={silverMedal}
          onChange={(e) => setSilverMedal(e.target.value)}
          placeholder="은메달 수"
        />
        {/* 동메달 수 입력 */}
        <input
          type="number"
          style={inputStyle}
          value={bronzeMedal}
          onChange={(e) => setBronzeMedal(e.target.value)}
          placeholder="동메달 수"
        />
        {/* 추가 버튼 */}
        <button style={btnStyle} onClick={addCountry}>
          국가 추가
        </button>
        {/* 업데이트 버튼 */}
        <button onClick={updateCountry}>수정</button>

        <div style={style}>
          <table>
          {/* 제목 */}
            <thead>
              <tr>
                <th>국가</th>
                <th>금메달</th>
                <th>은메달</th>
                <th>동메달</th>
                <th>액션</th>
              </tr>
            </thead>
            <tbody>
              {countries.map((country) => (
                <Country
                  key={country.id}
                  country={country}
                  onDelete={() => deleteCountry(country.id)}
                />
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

export default App;

  return (
    // 출력
    <tr>
      <td>{country.name}</td>
      <td>금: {country.gold}</td>
      <td>은: {country.silver}</td>
      <td>동: {country.bronze}</td>
      <button onClick={onDelete}>삭제</button>
    </tr>
  );
};

 

깃 레포지토리 생성

→ git init

→ git checkout origin 생성한 깃 레포지토리 주소

→ git add . → git commit -m "" → git push

→ 깃 레포지토리 가서 새로고침 후 파일 확인

 

챗gpt가 나름 쉽게 알려줬는데

로직도 이해했고

한 번 작성도 해봤는데

내가 진짜 CRUD를 이해한게

맞을까..??