Custom Hook을 활용한 메모장 기능 구현하기

06 Nov 2023

reactjs

이번 글에서는 React에서 Custom Hook을 활용하여 간단한 메모장 기능을 구현하는 방법을 알아보겠습니다. Custom Hook은 React 컴포넌트 로직을 재사용하기 위한 방법으로, 이를 통해 메모장에 필요한 기능들을 모듈화하고 간결한 코드를 작성할 수 있습니다.

Custom Hook 작성하기

먼저, useMemoList라는 Custom Hook을 작성해보겠습니다. 이 Custom Hook은 메모 리스트를 관리하기 위한 로직을 포함하고 있습니다.

import { useState } from 'react';

const useMemoList = () => {
  const [memos, setMemos] = useState([]);

  const addMemo = newMemo => {
    setMemos([...memos, newMemo]);
  };

  const deleteMemo = memoId => {
    setMemos(memos.filter(memo => memo.id !== memoId));
  };

  return {
    memos,
    addMemo,
    deleteMemo
  };
};

export default useMemoList;

위의 코드에서는 memos라는 배열 상태와 addMemo, deleteMemo라는 함수를 반환합니다. addMemo 함수는 새로운 메모를 추가하는 로직을 처리하고, deleteMemo 함수는 메모를 삭제하는 로직을 처리합니다.

메모장 컴포넌트에서 Custom Hook 사용하기

이제 작성한 Custom Hook을 활용하여 메모장을 구현해보겠습니다. 아래는 간단한 메모장 컴포넌트의 예시입니다.

import React, { useState } from 'react';
import useMemoList from './useMemoList';

const MemoApp = () => {
  const [newMemo, setNewMemo] = useState('');
  const { memos, addMemo, deleteMemo } = useMemoList();

  const handleAddMemo = () => {
    if (newMemo) {
      const memo = {
        id: Date.now(),
        content: newMemo
      };
      addMemo(memo);
      setNewMemo('');
    }
  };

  const handleDeleteMemo = memoId => {
    deleteMemo(memoId);
  };

  return (
    <div>
      <input
        type="text"
        value={newMemo}
        onChange={e => setNewMemo(e.target.value)}
      />
      <button onClick={handleAddMemo}>메모 추가</button>
      
      {memos.map(memo => (
        <div key={memo.id}>
          <p>{memo.content}</p>
          <button onClick={() => handleDeleteMemo(memo.id)}>삭제</button>
        </div>
      ))}
    </div>
  );
};

export default MemoApp;

위의 코드에서는 useMemoList Custom Hook을 useMemo로 import하고, memos, addMemo, deleteMemo를 사용하여 메모 추가 및 삭제 기능을 구현하였습니다.

결론

이렇게 Custom Hook을 활용하여 간단한 메모장 기능을 구현할 수 있습니다. Custom Hook을 사용하여 React 컴포넌트 로직을 재사용하면 코드의 가독성과 재사용성을 향상시킬 수 있습니다. 더 복잡한 기능을 구현할 때에도 Custom Hook을 활용하면 코드를 모듈화하여 관리하기 쉬워집니다.

#React #CustomHook