React 활용 예시(Custom Hook)

import React from 'react'

import {useCounter} from './useCounter';

/*

    ! Custom Hook

    : 리액트의 기본 Hook을 사용하여 작성되는 재사용 가능한 로직의 모음

    >> useState, useEffect, useRef등

    ! Custom Hook 생성 방법

    >> use로 시작하는 함수 정의

     : 해당 함수 내부에서 다른 Hook을 호출

    >> 결과와 기능을 반환

*/

export default function Custom01() {

    const {count, increment, decrement, reset}= useCounter(0)

  return (

    <div>

        {count}

        <button onClick={increment}>증가</button>

        <button onClick={decrement}>감소</button>

        <button onClick={reset}>리셋</button>

    </div>

  )

}

 

useCounter.tsx

import { useState } from "react";

/*

    ! Custom Hook

    >> 사용되는 컴포넌트에 해당 훅의 기능이 정의된 것처럼 동작

*/

export function useCounter(initialValue: number){

    /*

        초기값을 매개변수로 받고

        >> 카운터를 증가, 감소, 초기화 하는 함수와 현재값을 반환

    */

    const [count, setCount]= useState<number>(initialValue);

    const increment=()=> setCount(p=>p+1);

    const decrement=()=> setCount(p=>p>=1?p-1:0);

    const reset=()=> setCount(initialValue);

    /*

        객체: 속성1, 메소드 3

    */

   return {count, increment, decrement, reset};

}