CODE_DAY 1

" ## **Day 1: 기본 레이아웃 설정 및 입력 폼 구현** ### 1. **프로젝트 셋업** - Vite로 리액트 프로젝트를 셋업하고, 리액트 어플리케이션을 한번 켜보세요! - Vite 셋업에 어려움이 있다면 공식 문서를 참고하세요: [Vite 공식문서](https://ko.vitejs.dev/guide/). ### 2. **기본 레이아웃 구성** - App.jsx에 기본 레이아웃을 설정하여 UI의 뼈대를 만듭니다. - 정렬을 좀 연습해 볼게요. 어플리케이션이 항상 가로 기준으로 화면 중앙에 배치되게 합니다. - 이후, 백그라운드 컬러, 상단 여백 등등 기본적인 레이아웃을 더 넣어줍니다.. ### 3. **입력 폼 UI 구현** - 나라 이름, 금메달, 은메달, 동메달 입력 필드를 추가하고 제출 버튼을 추가하여 폼을 완성합니다. - 제출 버튼 클릭 시 데이터를 추가할 수 있도록 onSubmit 이벤트 핸들러를 설정하고, 기본 상태를 관리할 useState 훅을 사용해 초기 상태를 설정합니다. - 제출 후 입력 필드를 초기화하도록 처리합니다. - onSubmit 을 사용하기 위해서 Input 들은 Form 안에 위치되어야 함을 잊지 말아주세요."

 

---

1. VITE 프로젝트 셋업 (bash)

 

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

---

2. 기본 레이아웃 구성

 

App.jsx

 

import React, { useState } from 'react';

function App() {
  // 입력 필드의 상태를 관리하기 위한 useState 훅
  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();
    console.log('제출된 데이터:', formData);

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

  return (
    <div style={styles.container}>
      <h1>메달 현황 입력</h1>
      <form onSubmit={handleSubmit} style={styles.form}>
        <label>
          나라 이름:
          <input
            type="text"
            name="country"
            value={formData.country}
            onChange={handleChange}
          />
        </label>
        <label>
          금메달:
          <input
            type="number"
            name="gold"
            value={formData.gold}
            onChange={handleChange}
          />
        </label>
        <label>
          은메달:
          <input
            type="number"
            name="silver"
            value={formData.silver}
            onChange={handleChange}
          />
        </label>
        <label>
          동메달:
          <input
            type="number"
            name="bronze"
            value={formData.bronze}
            onChange={handleChange}
          />
        </label>
        <button type="submit">제출</button>
      </form>
    </div>
  );
}

// 기본 스타일 설정
const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100vh',
    backgroundColor: '#f0f0f0'
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    gap: '10px',
    width: '300px'
  }
};

export default App;

---

 

• handleChange 함수: 각 입력 필드에서 변경된 값을 상태에 업데이트합니다.
• handleSubmit 함수: 제출 시 데이터를 콘솔에 출력하고, 필드를 초기화합니다.
• styles 객체: 화면 중앙 정렬, 배경색, 여백 등 기본 스타일을 정의했습니다.