[React] Custom Hook

목차

1. Custom Hook이란

2. Custom Hook 사용법

---

Custom Hook이란

Custom Hook은 Hook을 조합하여 만든 재사용 가능한 함수를 말합니다.

반복되는 컴포넌트의 로직을 재사용가능하게 하여 가독성과 유지보수에 유용합니다.

 

Custom Hook 유의사항

• UI 요소 포함하지 않기
• 데이터, 상태, 로직만 포함하기
• 불필요한 리렌더링 줄이기(useCallback, useMemo)
• 하나의 Hook당 하나의 역할만 담당

 

Custom Hook 사용법

컴포넌트에서 공통으로 사용되는 브라우저의 웹 스토리지인 로컬스토리지 관리용 CustomHook을 만들어 보겠습니다.

 

import {useEffect, useState} from "react";

function useLocalStorage(key, initialValue) {

    const [value ,setValue] = useState(() => {
        const saved = localStorage.getItem(key);

        return saved ? JSON.parse(saved) : initialValue;
    })

    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(value));
    },[key, value])

    return [value, setValue]
}

export default useLocalStorage;

import useLocalStorage from "./useLocalStorage";
import {useState} from "react";

function TodoApp() {
    const [todos, setTodos] = useLocalStorage("todos", []);
    const [input, setInput] = useState("");

    const addTodo = () => {
        if(!input.trim()) return;

        setTodos([...todos, input]);
        setInput("");
    }

    const removeTodo = (idx) => {
        setTodos(todos.filter((_, i) => i !== idx));
    }

    return (
        <div>
            <h2>Todo List</h2>
            <input value={input} onChange={(e) => setInput(e.target.value)} />
            <button onClick={addTodo}>추가</button>

            <ul>
                {todos.map((todo, idx) => (
                    <li key={idx}>
                        {todo} <button onClick={() => removeTodo(idx)}>X</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default TodoApp;

 

컴포넌트에서 useState를 사용해서 localStorage에 값을 추가하고 삭제하는 로직을 추가하였습니다.

useLocalStorage라는 CustomHook을 사용해서 값을 추가 삭제 할 수 있고 로컬스토리지에 값을 동기화 할 수 있습니다.

 

custom hook을 이용한 localstorage 동기화 결과

---

참고