React 실습 진행 - 1 ( 기본 추가 로직 )

기본 템플릿

  return (
    <div>
      <h1>2024 파리 올림픽 메달 대시보드</h1>

      <form>
        <div>
          <label>국가명</label>
          <input/>
        </div>
        
        <form>
        <div>
          <label>금메달</label>
          <input/>
        </div>
        
        <form>
        <div>
          <label>은메달</label>
          <input/>
        </div>
        
        <form>
        <div>
          <label>동메달</label>
          <input/>
        </div>
        
        <div>
          <button>추가하기</button>
          <button>업데이트</button>
        </div>
      </form>
    </div>
  );

• css적용이 필요한 속성들에 각각 ClassName값을 지정 후 적용

• input에 들어오는 값을 저장하고 추가하는 로직을 만들기 OnChnage, useState

• 추가한 값을 각 주제에 맞게 변경 후 적용

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

// 함수 영역
const App = () => {
  const [countryInput, setCountryInput] = useState("");
  const [goldInput, setGoldInput] = useState();
  const [silverInput, setSilverInput] = useState();
  const [bronzeInput, setBronzeInput] = useState();

  const addCountry = (event) => {
  	// 자동 새로고침 되지 않게 
    event.preventDefault();
	
    // 각 input값들 출력 
    console.log(countryInput);
    console.log(goldInput);
    console.log(silverInput);
    console.log(bronzeInput);
  };

  return (
    <div className="main-container" onSubmit={addCountry}>
      <h1>2024 파리 올림픽 메달 대시보드</h1>

      <form className="input-form">
        <div className="input-field">
          <label htmlFor="country">국가명</label>
          <input
            id="country"
            onChange={(e) => {
              setCountryInput(e.target.value);
            }}
          />
        </div>

        <div className="input-field">
          <label htmlFor="gold">금메달</label>
          <input
            id="gold"
            onChange={(e) => {
              setGoldInput(e.target.value);
            }}
          />
        </div>

        <div className="input-field">
          <label htmlFor="silver">은메달</label>
          <input
            id="silver"
            onChange={(e) => {
              setSilverInput(e.target.value);
            }}
          />
        </div>

        <div className="input-field">
          <label htmlFor="bronze">동메달</label>
          <input
            id="bronze"
            onChange={(e) => {
              setBronzeInput(e.target.value);
            }}
          />
        </div>

        <div className="button-group">
          <button type="submit">추가하기</button>
          <button>업데이트</button>
        </div>
      </form>
    </div>
  );
};

export default App;

css 적용 처음부터 막혔다 -> 브라우저에서 적용하고 선언을 그대로 복사했으니 오타도 아닌데 뭐가 문제지? -> css파일 import를 안했음