개인과제 - Medal Tracker 코드 분석하기

  학원을 다니니 복습을 해야 한다는 말을 정말 많이 듣는데, 프로젝트 하고 강의 듣고 이러면 정보량이 몰아쳐 복습할 여건이 잘 안된다. 오늘은 새벽에 깼는데 잠이 안와서 잠도 안오는 김에 오늘 개인 프로젝트 복습을 여유롭게 하려고 한다. 오늘 완성한 Medal Tracker의 코드를 새로 작성하며 분석할 것이고, 내일이 조금 걱정되긴 해서 하다가 잠오면 바로 잘 것이다. 스케줄에 헐떡이는 게 아니라 이렇게 자유롭게 복습하는 시간이 좀 생겼으면 좋겠다. 

 

Medal Tracker는 국가 이름, 메달 개수를 입력하면 해당 정보를 추가할 수 있고, 메달의 개수가 달라지면 정보를 업데이트할 수 있다. 삭제 기능, 정렬 기능 등등을 포함한 리액트 입문 첫 개인 프로젝트이다.

 

1. UI 레이아웃 작성하기

import React from 'react'

const Review = () => {
  return (
    <div>Review</div>
  )
}

export default Review

 - 함수형 컴포넌트 생성 단축키, rafce를 입력하면 볼 수 있는 기본 창이다.

 - import-const 전 구간은 컴포넌트 밖 내가 필요한 파일을 가져오는 영역, const-return 전까지 자바스크립트 를 쓸 수 있는 구역, return부터 html를 쓸 수 있는 구역으로 나눠진다. 

 

 1-1 화면 구성

 - 화면 구성은 예시로 주어진 웹 페이지의 디자인을 참고했다. 

import React from 'react'

const Review = () => {
  return (
    <>
      <h1>2024 파리 올림픽</h1>
      <section className="add-information">
        <form className="input-group">
          <div>
            국가명
            <input type="text"/>
          </div>
          <div>
            금메달
            <input type="text"/>
          </div>
          <div>
            은메달
            <input type="text"/>
          </div>
          <div>
            동메달
            <input type="text"/>
          </div>
        </form>
        <div>
          <button>
            국가 추가
          </button>
          <button>업데이트</button>
        </div>
      </section>
      <div>
        아래 추가될 리스트
      </div>
    </>
  )
}

export default Review

 - 적절한 html 태그를 사용해서 레이아웃을 잡아주고, 국가명, 금메달 등 input이 들어갈 자리에는 type이 text인 input 태그를 넣어주었다. 메달 input 태그가 text인 이유는 number는 0과 000일 때 동일하게 0이라고 인식해서 리렌더링이 되지 않는 등의 문제가 발생해, 웬만하면 text를 쓰라는 코칭을 따랐다. 

 - '아래 추가될 리스트'구간에 국가 이름, 메달 정보 등을 동적으로 추가할 계획이다. 

 

2. 상태 관리와 메달 집계 추가 기능 구현

 -Review.jsx 파일에서 국가리스트 상태를 관리하기 위해 useState 훅을 사용한다. 

const Review = () => {
  const [goldCount, setGoldCount] = useState("0");

  const [silverCount, setSilverCount] = useState("0");

  const [bronzeCount, setBronzeCount] = useState("0");

  const [countries, setCountries] = useState([]);

  const [country, setCountry] = useState("");
  .
  .
  .

 - State(상태)란 컴포넌트 내부에서 바뀔 수 있는 값을 의미하는데, 이걸 잘 관리하는 것이 리액트의 핵심이다. 구조분해할당을 이용해서 스테이트를 만들 수 있는 useState를 바뀔 수 있는 값마다 하나씩 만들어줬다. -Count, country가 합쳐진 배열인 countries를 제외하고는 모두 문자열이다. 

 - 만들어준 state를 연결해줄 차례. input에 들어갈 input~handler들을 선언했다. 

const inputCountryHandler = (event) => {
    setCountry(event.target.value);
  };

  const inputGoldHandler = (event) => {
    setGoldCount(event.target.value);
  };

  const inputSilverHandler = (event) => {
    setSilverCount(event.target.value);
  };

  const inputBronzeHandler = (event) => {
    setBronzeCount(event.target.value);
  };

 - onchange 이벤트가 발생할 때 event 객체를 생성하는데, 그것의 value값(input 한 요소의 현재 값)에 접근하기 위하여(event,target,value)를 써 줬다. 만들어준 input~handler를 onchange 이벤트와 함께 input에 연결해주었다. 

<div>
            국가명
            <input type="text" onChange={inputCountryHandler} />
          </div>
          <div>
            금메달
            <input type="text" onChange={inputGoldHandler} />
          </div>
          <div>
            은메달
            <input type="text" onChange={inputSilverHandler} />
          </div>
          <div>
            동메달
            <input type="text" onChange={inputBronzeHandler} />
          </div>

2-1 국가 이름과 메달 수를 입력하여 메달 집계 리스트에 추가하는 기능 구현

~
const [country, setCountry] = useState("");

  const handleAddCountry = () => {
      const newCountries = {
        country: country,
        bronze: bronzeCount,
        silver: silverCount,
        gold: goldCount,
      };
      setCountries([...countries, newCountries]);
  
  };

  return (
 ~

 - handleAddCountry를 사용해서 event가 발생했을 때 newCountries 객체를 추가하는 로직을 만들었다. input에 따라 바뀔 수 있는 값이기 때문에 value 값은 state로 작성해 준다.

 - newCountries를 선언하고 새 배열을 만들어 주는데, state를 변경해야 하기 때문에 setCountries를 이용해 새 배열을 만들어 준다. setCountires를 사용하면 원본 배열은 변하지 않고, 새 배열을 setCountires를 통해 전달하여 React가 컴포넌트를 리렌더링 하게 한다. 

 - handleAddCountry를 잘 선언했으니 사용해줄 차례다. onclick을 이용해 국가 추가 button에 onclick 이벤트 핸들러를 추가했다. 

<button onClick={handleAddCountry}>
      국가 추가
</button>

- handleAddCountry에 인자가 들어갈 때, country 값이 

 

더 적기