[250122] React로 만들어보는 CRUD

어디서나 프론트엔드에서 CRUD는 중요합니다.
저번에 JS를 활용하여 만들어보았던 CRUD에 이어 이번에는 JS의 라이브러리라고 할 수 있는 React에서 CRUD를 구현해 보았습니다.
오늘 TIL은 이러한 구현 내용을 간단하게 요약해보는 시간을 갖도록 하겠습니다.

들어가기 전, CRUD를 다시 한 번 알아보자면
Create, Read, Update, Delete의 약자로,
값을 입력받아 데이터를 Create하고 그 데이터를 Read하며
해당 데이터만 선택하여 Update가 되며 해당 데이터를 Delete하는 기능입니다.

그렇다면 React에서는 이를 어떻게 구현 했을지 요약하며 같이 알아보는 시간을 가져보도록 하겠습니다.

상태 관리

먼저, React에서 CRUD 기능을 구현하기 위해서는 사용할 상태들을 useState 훅을 사용하여 데이터 상태를 관리하여야 합니다.

const [countryName, setCountryName] = useState("");
const [countGoldMedal, setCountGoldMedal] = useState(0);
const [countSilverMedal, setCountSilverMedal] = useState(0);
const [countBronzeMedal, setCountBronzeMedal] = useState(0);
const [countries, setCountries] = useState([]);

Create

폼 안에 있는 input 태그에 데이터 값들을 폼 제출시에 호출되어 입력된 데이터를 객체로 만들어 데이터 상태에 추가합니다.

const handleFormSubmit = (e) => {
  e.preventDefault();

  const isCountryFound = findCountryByName(countryName);

  if (!countryName.trim()) {
    alert("국가 이름을 입력해주세요.");
    return;
  }

  if (isCountryFound) {
    alert("이미 존재하는 국가입니다.");
    return;
  }

  const newCountry = {
    id: new Date().getTime(),
    countryName: countryName,
    goldMedal: countGoldMedal,
    silverMedal: countSilverMedal,
    bronzeMedal: countBronzeMedal,
  };

  setCountries([...countries, newCountry]);

  setCountryName("");
  setCountGoldMedal(0);
  setCountSilverMedal(0);
  setCountBronzeMedal(0);
};

Read

위 폼에서 입력된 데이터를 props로 전달하여 자식 컴포넌트에서 리스트업 하였습니다.

const ListCountry = ({ countries, handleDelete }) => {
  return (
    <ul>
      {countries
        .sort((a, b) => {
          if (b.goldMedal !== a.goldMedal) return b.goldMedal - a.goldMedal;
          if (b.silverMedal !== a.silverMedal)
            return b.silverMedal - a.silverMedal;
          return b.bronzeMedal - a.bronzeMedal;
        })
        .map((country) => {
          return (
            <li key={country.id}>
              <CountryName name={country.countryName} /> -{" "}
              <MedalQuantity country={country} />
              <button onClick={() => handleDelete(country.id)}>삭제</button>
            </li>
          );
        })}
    </ul>
  );
};

Update

기존에 등록된 데이터를 input 태그 안에 값과 비교해 특정 값이 일치하면 그 객체를 업데이트합니다.

const handleUpdate = (e) => {
  e.preventDefault();

  if (!countryName.trim()) {
    alert("국가 이름을 입력해주세요.");
    return;
  }

  const isCountryFound = findCountryByName(countryName);

  if (isCountryFound) {
    const updatedCountries = countries.map((country) => {
      if (country.countryName === countryName) {
        return {
          ...country,
          goldMedal: countGoldMedal,
          silverMedal: countSilverMedal,
          bronzeMedal: countBronzeMedal,
        };
      }
      return country;
    });

    setCountries(updatedCountries);

    setCountryName("");
    setCountGoldMedal(0);
    setCountSilverMedal(0);
    setCountBronzeMedal(0);

    alert(`${countryName} 메달 데이터를 업데이트했습니다.`);
  } else {
    alert(`${countryName}에 해당하는 국가가 없습니다!`);
  }
};

Delete

위 Update 기능과 유사한 부분이 많습니다. 삭제하고 싶은 객체의 id값을 받아 해당 객체를 삭제합니다. 삭제에는 filter() 메서드를 사용하여 해당 객체를 제외한 모든 값들은 다시 리스트업 해줍니다.

const handleDelete = (id) => {
  const countryToDelete = countries.find((country) => country.id === id);
  const deletedCountries = countries.filter((country) => country.id !== id);
  setCountries(deletedCountries);
  alert(`${countryToDelete.countryName} 국가를 삭제했습니다.`);
};

마무리

React에서 CRUD를 구현하는데 바닐라 JS와 크게 다른 점은 상태 관리였던 것 같습니다. 위 코드도 부족한 점이 많고 내일 바로 고칠 점이 있는데, 이는 내일 바로 트러블슈팅을 통하여 고쳐볼 예정입니다.