[React 개인과제_입문 주차] (기록용)

react 프로젝트 셋업, 폼 ui 구현

 

예시

 

이번 개인 프로젝트로는 올림픽 메달 집계를 관리해 보는 Olympic Medal Tracker를 제작한다. 강의에서 배운 리액트 컴포넌트와 이벤트 관리, state 관리를 통해 필요한 기능을 구현할 수 있다. 과제를 수행하면서 리액트 컴포넌트 useState 관리에 익숙해질 것으로 기대된다. 이번 개인과제에서도 1~3일차에 해당하는 로드맵이 있는데, 제작하다 보니 순서를 거의 지키지 않게 되었다... 이번에도 필수 구현사항들을 먼저 만들어보고, TMDB 영화 검색 사이트처럼 나중에 추가 목표들을 하나씩 도전해볼 계획이다.

 

터미널을 열고 Vite로 리액트 프로젝트를 셋업한다. 이제 브라우저에서 React 앱을 열어볼 수 있다.

yarn create vite my-medal-tracker --template react

cd my-medal-tracker
yarn
yarn dev

 

 

◆ 입력 폼 UI 구현

 

App.jsx에서 입력 폼 UI를 구현해 메달 집계 기능을 위한 기본 레이아웃을 설정할 수 있다.

    <div className="app-container">
      <div className="app-content">

        <h1>Olympic Medal Tracker 만들기!</h1>

        {/* 입력 폼 */}
        <form onSubmit={handleSubmit} className="input-group">
          <div className="input-field">
            <label>국가명</label>
            <input type="text" placeholder="국가 입력" value={country} onChange={(e) => setCountry(e.target.value)} />
          </div>
          <div className="input-field">
            <label>금메달</label>
            <input type="number" placeholder="0" value={gold} onChange={(e) => setGold(e.target.value)} />
          </div>
          <div className="input-field">
            <label>은메달</label>
            <input type="number" placeholder="0" value={silver} onChange={(e) => setSilver(e.target.value)} />
          </div>
          <div className="input-field">
            <label>동메달</label>
            <input type="number" placeholder="0" value={bronze} onChange={(e) => setBronze(e.target.value)} />
          </div>

          <div className="button-group">
            <button type="submit">국가 추가</button>
            <button type="button">업데이트</button>
          </div>
        </form>

 

국가 이름과 금, 은, 동메달을 입력할 수 있는 필드와 제출 및 업데이트 버튼을 추가해서 간단하게 폼을 제작한다. 조건으로 어플리케이션이 가로 기준 화면 중앙에 배치되게끔 css를 설정해 주면 되는데, 방법은 다양하지만 index.css에 스타일을 추가하는 방식을 택했다. 다른 여백이나 컬러 디자인은 마지막에 설정해 줄 것이다.

/* 화면 중앙 배치 설정 */
.input-group {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f9;
}