CODE_DAY2

Q. ## **Day 2: 메달 집계 리스트 출력 및 CRUD 기능 구현** ### 1. **메달 집계 리스트 출력** - App.jsx에 국가별 메달 집계를 표시하는 리스트를 추가합니다. - 국가 리스트 데이터를 저장할 useState를 추가하고, map 메서드를 사용해 리스트에 데이터를 반복 출력합니다. - 금메달 수를 기준으로 내림차순 정렬하여 상위 국가부터 표시되도록 합니다. ### 2. **CRUD 기능 - Create 및 Read** - **Create** 기능 구현: - 제출 버튼 클릭 시 새로운 국가와 메달 정보를 리스트에 추가하고 화면에 표시됩니다. - **Read** 기능 구현: - 리스트에 표시된 국가별 메달 집계를 확인할 수 있도록 UI에 반영합니다. ### 3. **컴포넌트 구조 분리** - 리스트 항목과 폼을 별도의 컴포넌트로 분리하여 코드의 가독성을 높입니다. - 예를 들어, 입력 폼은 MedalForm 컴포넌트로, 국가별 메달 정보는 MedalList와 MedalItem 컴포넌트로 나누어 관리할 수 있습니다.

---

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]);
  };

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

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

export default App;

---

2. MedalForm.jsx (사용자로부터 국가와 메달 수를 입력받아 App.jsx 로 전달하는 코드)

 

import React, { useState } from 'react';

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

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

  const handleSubmit = (e) => {
    e.preventDefault();

    // 새로운 메달 정보를 상위 컴포넌트로 전달
    onAddMedal({
      ...formData,
      gold: parseInt(formData.gold) || 0,
      silver: parseInt(formData.silver) || 0,
      bronze: parseInt(formData.bronze) || 0
    });

    // 폼 초기화
    setFormData({
      country: '',
      gold: '',
      silver: '',
      bronze: ''
    });
  };

  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">추가</button>
    </form>
  );
}

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

export default MedalForm;

---

3. MedalList.jsx (국가별 메달 데이터를 표시, 메달 데이터를 금메달 수 기준으로 내림차순 정렬하는 리스트 코드)

 

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

function MedalList({ medals }) {
  // 금메달 수를 기준으로 내림차순 정렬
  const sortedMedals = [...medals].sort((a, b) => b.gold - a.gold);

  return (
    <div style={styles.list}>
      {sortedMedals.map((medal, index) => (
        <MedalItem key={index} medal={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 }) {
  return (
    <div style={styles.item}>
      <h3>{medal.country}</h3>
      <p>금메달: {medal.gold}</p>
      <p>은메달: {medal.silver}</p>
      <p>동메달: {medal.bronze}</p>
    </div>
  );
}

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

export default MedalItem;

---

 

• App 컴포넌트: 메달 데이터를 관리하며, 새로운 메달 데이터를 추가하는 addMedal 함수와 전체 메달 리스트를 렌더링합니다.
• MedalForm 컴포넌트: 사용자 입력을 받아 상위 컴포넌트로 전달하고 입력 필드를 초기화합니다.
• MedalList 컴포넌트: 메달 데이터를 금메달 수 기준으로 내림차순 정렬하여 MedalItem 컴포넌트를 반복 출력합니다.
• MedalItem 컴포넌트: 각 국가별 메달 정보를 표시하는 단일 항목입니다.