React 입문 (CRUD) - 2024 파리 올림픽 메달 트레커

// 국가명

  const [nation, setNation] = useState("");

  // 금메달 수

  const [goldMedal, setGoldMedal] = useState(0);

  // 은메달 수

  const [silverMedal, setSilverMedal] = useState(0);

  // 동메달 수

  const [bronzeMedal, setBronzeMedal] = useState(0);

  /* 사용자가 입력한 각 메달 수 넣을 배열 */

  const [userData, setUserData] = useState([]);

여기는 쉽게 작성했다.

useState는 

const [상태 함수, 상태 변경 함수] = useState(초기값);

이렇게 사용한다.

상태 변경 함수는 말 그대로 함수이다.

상태 함수의 값을 변경해주는 함수이다.

상태 함수는 명사고, 상태 변경 함수는 동사라고

생각하면 편하다.

그래서 상태 변경 함수가 상태 함수를 변경되게

하는 것이라고 생각하면 된다.

 

 

  // 추가 버튼 click 함수

  // 배열로 국가명, 금메달, 은메달, 동메달 추가

  const handleClick = () => {

    const addByUser = { nation, goldMedal, silverMedal, bronzeMedal };

    setUserData((prev) => {

      return [...prev, addByUser];

    });

  };

nation, goldMedal, silverMedal, bronzeMedal

이라는 변수들로 구성된 객체를 생성한다.

setUserData((prev) => { 에서는

이전 상태값을 기반으로 새로운 데이터를 추가하고

return [...prev, addByUser];

이전의 데이터 배열에 새로 생성한 객체를 추가하여 반환한다.

 

 

  // 삭제 버튼 click 함수

  // 해당 국가를 제외한 배열을 만듦

  const handleDeleteNation = (name) => {

    const filteredData = userData.filter((item) => item.nation !== name);

    // nation 값이 일치하지 않는 항목들만 남긴 새로운 배열을 만듦

    setUserData(filteredData);

  };

 

여기는 item.nation !== name 때문에

이해하는데 좀 오래 걸렸다.

 

1. name: 삭제하려는 특정 국가명

2. userData: 여러 국가 + 국가의 메달 정보

3. filter( ): 조건에 맞는 항목들만 배열로 반환

4. 클릭한 국가 + 동일한 국가만 배열에서 삭제

5. 나머지는 그대로 남아있음

 

 

// 수정 버튼 click 함수

  // nation 값이 현재 입력된 국가명과 일치하는 항목을 찾음

  const handleUpdateNation = () => {

    // nation 값이 일치하면 입력된 값으로 해당 항목을 업데이트

    const updatedData = userData.find((item) => item.nation === nation);

    // 사용자가 입력한 국가명과 일치하는 항목이 있다면

    if (updatedData) {

      // 이전 상태의 userData 배열을 기반으로 업데이트

      setUserData((prev) => {

        // 이전 상태의 userData 배열을 복사한 후 각 항목을 순회하며 검사

        let result = [...prev].map((item) => {

          // 일치하면 사용자가 입력한 값을 반영한 새 객체로 교체

          // 일치하지 않으면 기존 값을 그대로 유지

          return item.nation === updatedData.nation

            ? { nation, goldMedal, silverMedal, bronzeMedal }

            : item;

        });

        // 업데이트된 배열을 반환하여 userData 상태를 업데이트

        return result;

      });

    }

  };

 

 

이 세 부분이랑 제일 헷갈렸던 부분은

데이터를 출력하는 부분이었다.

<div className="grid">

          {userData.map(function (item) {

            return (

              <table key={item.nation}>

                <tr>

                  <td>{item.nation}</td>

                  <td>{item.goldMedal}</td>

                  <td>{item.silverMedal}</td>

                  <td>

                    {item.bronzeMedal}

                    <button onClick={() => handleDeleteNation(item.nation)}>

                      삭제

                    </button>

                  </td>

                </tr>

              </table>

            );

          })}

        </div>

테이블 안에 나라, 금, 은, 동메달을

<td>엘리먼트를 넣어서

출력하는 방식이 제일 어려웠다..

 

베이직반에서 <li>로 출력하는 방법을 배웠고,

이번에 <td>로 출력하는 방법을 알았으니까

다음번에는 좀 더 잘할 수 있을 것 같다!