CODE_DAY3

Q. 

## **Day 3: 메달 집계 수정 및 삭제 기능 구현** ### 1. **메달 집계 업데이트 기능** - 이미 추가된 국가의 메달 수를 수정할 수 있는 기능을 추가합니다. - **구체적인 구현**: - 수정하려는 국가의 데이터를 입력한 후 [업데이트] 버튼을 클릭하면 해당 국가의 메달 수가 변경됩니다. - 입력한 나라 이름을 기반으로 리스트에서 해당 국가를 찾아 수정합니다. ### 2. **메달 집계 삭제 기능** - 각 나라 옆에 삭제 버튼을 추가하여, 클릭 시 해당 국가의 메달 집계가 리스트에서 제거되도록 합니다. - **구체적인 구현**: - filter 메서드를 활용하여 선택된 국가를 제외하고 나머지 국가들로 리스트를 재구성합니다. ### 3. **최종 확인 및 코드 정리** - 작성한 모든 기능이 정상적으로 작동하는지 테스트합니다. - 코드를 점검하고 불필요한 코드나 중복되는 코드를 정리하여 가독성을 높입니다. - **README 작성**: 프로젝트 구조와 구현한 기능들을 설명하는 README 파일을 작성합니다.

---

1. APP.jsx

 

 메달 집계 리스트에서 수정과 삭제기능 추가

수정기능을 통해 특정 국가의 메달수 업데이트 가능

삭제기능을 통해 리스트에서 국가 제거 가능

import React, { useState } from 'react';
import MedalForm from './MedalForm';
import MedalList from './MedalList';

function App() {
  const [medals, setMedals] = useState([]);

  // 메달 추가 기능
  const addMedal = (newMedal) => {
    setMedals((prevMedals) => [...prevMedals, newMedal]);
  };

  // 메달 업데이트 기능
  const updateMedal = (updatedMedal) => {
    setMedals((prevMedals) =>
      prevMedals.map((medal) =>
        medal.country === updatedMedal.country ? updatedMedal : medal
      )
    );
  };

  // 메달 삭제 기능
  const deleteMedal = (country) => {
    setMedals((prevMedals) => prevMedals.filter((medal) => medal.country !== country));
  };

  return (
    <div style={styles.container}>
      <h1>메달 집계</h1>
      <MedalForm onAddMedal={addMedal} onUpdateMedal={updateMedal} />
      <MedalList medals={medals} onDeleteMedal={deleteMedal} onEditMedal={updateMedal} />
    </div>
  );
}

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100vh',
    backgroundColor: '#f0f0f0'
  }
};

export default App;

---

2. MedalForm.jsx

 

수정기능을 위해 폼에 업데이트 기능 추가.

onUpdateMedal 함수를 통해 국가정보 수정가능

isEditing 상태를 추가하여 수정과 추가모드 전환

 

import React, { useState } from 'react';

function MedalForm({ onAddMedal, onUpdateMedal }) {
  const [formData, setFormData] = useState({
    country: '',
    gold: '',
    silver: '',
    bronze: ''
  });
  const [isEditing, setIsEditing] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (isEditing) {
      onUpdateMedal({
        ...formData,
        gold: parseInt(formData.gold) || 0,
        silver: parseInt(formData.silver) || 0,
        bronze: parseInt(formData.bronze) || 0
      });
    } else {
      onAddMedal({
        ...formData,
        gold: parseInt(formData.gold) || 0,
        silver: parseInt(formData.silver) || 0,
        bronze: parseInt(formData.bronze) || 0
      });
    }
    resetForm();
  };

  const resetForm = () => {
    setFormData({
      country: '',
      gold: '',
      silver: '',
      bronze: ''
    });
    setIsEditing(false);
  };

  return (
    <form onSubmit={handleSubmit} style={styles.form}>
      <input type="text" name="country" placeholder="나라 이름" value={formData.country} onChange={handleChange} required />
      <input type="number" name="gold" placeholder="금메달" value={formData.gold} onChange={handleChange} />
      <input type="number" name="silver" placeholder="은메달" value={formData.silver} onChange={handleChange} />
      <input type="number" name="bronze" placeholder="동메달" value={formData.bronze} onChange={handleChange} />
      <button type="submit">{isEditing ? '업데이트' : '추가'}</button>
    </form>
  );
}

const styles = {
  form: {
    display: 'flex',
    flexDirection: 'column',
    gap: '10px',
    width: '300px',
    marginBottom: '20px'
  }
};

export default MedalForm;

 

 

---

3. MedalList.jsx

 

MedalList는 onDeleteMedal과 inEditMedal 함수를 받아서 삭제와 수정버튼을 각항목에 추가

 

import React from 'react';
import MedalItem from './MedalItem';

function MedalList({ medals, onDeleteMedal, onEditMedal }) {
  const sortedMedals = [...medals].sort((a, b) => b.gold - a.gold);

  return (
    <div style={styles.list}>
      {sortedMedals.map((medal, index) => (
        <MedalItem key={index} medal={medal} onDelete={() => onDeleteMedal(medal.country)} onEdit={() => onEditMedal(medal)} />
      ))}
    </div>
  );
}

const styles = {
  list: {
    display: 'flex',
    flexDirection: 'column',
    gap: '10px',
    width: '300px'
  }
};

export default MedalList;

 

 

---

4. MedalItem.jsx

 

각항목에 삭제와 수정버튼을 추가하여, 삭제와 수정기능을 수행가능

 

import React from 'react';

function MedalItem({ medal, onDelete, onEdit }) {
  return (
    <div style={styles.item}>
      <h3>{medal.country}</h3>
      <p>금메달: {medal.gold}</p>
      <p>은메달: {medal.silver}</p>
      <p>동메달: {medal.bronze}</p>
      <button onClick={onEdit}>수정</button>
      <button onClick={onDelete}>삭제</button>
    </div>
  );
}

const styles = {
  item: {
    padding: '10px',
    border: '1px solid #ccc',
    borderRadius: '5px',
    backgroundColor: '#fff'
  }
};

export default MedalItem;

 

---