[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 23일차 - 리액트(4)

 

📚 커스텀 훅(Hook)

👉 커스텀 훅(Custom Hooks)은 사용자가 직접 만든 훅을 말하며, 여러 컴포넌트 간에 상태 로직을 재사용하는 데 사용된다.

👉 커스텀 훅은 기본 훅을 활용하여 만들어지며, 이름은 "use"로 시작해야 한다.

 

📖 사용예시

👉 커스텀 훅

import {useState} from "react"

function useCounter(initialCount) {
   const [count, setCount] = useState(initialCount);
   
   const increment = () => {
     setCount(count + 1)
   }
   return {count, increment};


}

export default useCounter

👉 컴포넌트

import useCounter from "../hooks/countHook";
import React from "react";

function UseCount() {
  const { count, increment } = useCounter(100)
  return (
    <div>
      <p>카운트 : {count}</p>
      <button onClick={increment}>증가</button>    
    <div>  
  
  )

}

export default UseCount

 

💻 코드 진행 순서

👉 위에 커스텀 훅에서 useCounter라는 함수를 만들고 인자는 어떤 값을 넣어주면 된다. 

👉 그 값을 useState()함수로 관리한다. 

👉 increment()라는 함수를 만들어서 기존의 값에 1씩 더한다. 

👉 return 할 때 내가 컴포넌트에서 사용하고 싶은 값을 객체로 감싸준다.

👉 컴포넌트에서 처음에 해당 파일을 import 해준다.

👉 useCounter에 100이라는 숫자를 넣어주면 커스텀 훅에서 그 값을 인자로 받는다. 

👉 그리고 커스텀 훅에서 리턴한 값을 구조분해할당을 사용하면 된다. 

👉 그리고 중괄호를 사용해서 값을 나타내면 된다. 

 

 

 

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