Custom Hook을 활용한 CRUD 기능 구현

06 Nov 2023

reactjs

React에서는 Custom Hook을 사용하여 재사용 가능한 로직을 만들 수 있습니다. 이번 글에서는 Custom Hook을 활용하여 CRUD(Create, Read, Update, Delete) 기능을 구현하는 방법에 대해 알아보겠습니다.

1. useCRUD Custom Hook 생성

먼저, CRUD 작업을 위한 Custom Hook을 생성합니다. 이 Custom Hook은 상태 관리와 해당 상태를 변경할 수 있는 함수들을 제공할 것입니다.

import { useState } from 'react';

const useCRUD = () => {
  const [data, setData] = useState([]);

  const createData = (newData) => {
    setData([...data, newData]);
  };

  const updateData = (id, updatedData) => {
    const updatedList = data.map((item) => {
      if (item.id === id) {
        return { ...item, ...updatedData };
      }
      return item;
    });
    setData(updatedList);
  };

  const deleteData = (id) => {
    const filteredList = data.filter((item) => item.id !== id);
    setData(filteredList);
  };

  return {
    data,
    createData,
    updateData,
    deleteData,
  };
};

export default useCRUD;

2. 사용 방법

이제 useCRUD Custom Hook을 사용하여 CRUD 기능을 구현해보겠습니다.

import React from 'react';
import useCRUD from './useCRUD';

const App = () => {
  const { data, createData, updateData, deleteData } = useCRUD();

  return (
    <div>
      <h1>CRUD Example</h1>
      <button onClick={() => createData({ id: 1, name: 'John' })}>Create</button>
      <ul>
        {data.map((item) => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => updateData(item.id, { name: 'Updated' })}>Update</button>
            <button onClick={() => deleteData(item.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

위의 예제에서는 useCRUD Custom Hook을 사용하여 데이터를 생성, 업데이트 및 삭제할 수 있습니다. data 배열은 생성한 데이터를 보여줍니다.

마무리

Custom Hook을 사용하면 여러 컴포넌트에서 재사용 가능한 로직을 쉽게 구현할 수 있습니다. CRUD 기능을 포함한 상태 관리 로직을 Custom Hook으로 추출하여 코드를 재사용하면 개발 생산성과 코드 유지보수에 도움이 됩니다.

#React #CustomHook