React

Custom Hooks

• 여러 컴포넌트에서 공통된 로직을 재사용하기 위해 만들어진 함수
• Custom Hooks은 로직을 추상화하고 컴포넌트로부터 분리하여 재사용성과 코드 가독성을 개선
• 전체 응용 프로그램의 모든 컴포넌트에서 사용 가능
• 캡슐화 할 수 있음

사용법

src 디렉터리에 hooks 라는 디렉터리 생성
1. use 접두사를 사용하여 메서드 이름 지정
2. 메서드 안에 useState, useEffect, useReducer, useCallback 등 Hooks 를 사용하여 원하는 기능을 구현해주고, 컴포넌트에서 사용하고 싶은 값들을 반환해주면 됌

example

App.js

import React from "react";
import useLocalStorage from "./useLocalStorage";
import useUpdateLogger from './useUpdateLogger';

export default function Input() {
  const [name, setName] = useLocalStorage("name", "");
  useUpdateLogger(name);
  return (
    <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
  );
}

useLocalStorage.js

• useState 와 동일한 형식을 갖고 있음

import { useEffect, useState } from "react";

//로드될 때 한 번만 이 작업을 수행
function getSavedValue(key, initialValue) {
  const savedValue = JSON.parse(localStorage.getItem(key));
  if (savedValue) return savedValue;

  if (initialValue instanceof Function) return initialValue();
  return initialValue;
}

//hook를 가져오고 그 안에 상태를 래핑하는 것
export default function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    return getSavedValue(key, initialValue);
  });

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

  return [value, setValue];
}

useUpdateLogger.js

• useEffect 와 동일한 형식을 갖고 있음

import { useEffect } from "react";

export default function useUpdateLogger(value) {
  useEffect(() => {
    console.log(value);
  }, [value]);
}

참고문서
custom hooks,
https://react.vlpt.us/basic/21-custom-hook.html
https://youtu.be/S6POUU2-tr8
https://youtu.be/6ThXsUwLWvc

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.