useCallback: 불필요한 함수의 재생성 방지하는 React Hook

 

 

 

 

📌 useCallback

: 불필요한 함수의 재생성 방지

• 객체 타입을 최적화 하는 방법
• 리렌더링 되더라도 다시 생성되지 않게 방지하는 기능
  
  

 

---

 

 

📌 useCallback 사용하기

 

📍 useCallback 불러오기

import { useState, useRef, useReducer, useCallback} from 'react'

 

 

 

 

📍useCallback 구조

 

useCallback( function, [deps] )

• function: 최적화 할 함수 (재생성을 방지할 함수)
• deps: 최적화 기준이 될 배열
  deps를 빈 배열로 놔둠 👉 Mount(탄생) 될 때에만 함수 생성, 그 뒤로는 생성 X

 

• function을 그대로 생성해서 반환해준다.
• deps가 변경되었을 때만 최적화 한다.

// CREATE (일정 추가 기능)
  const onCreate = useCallback((content) => {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        isDone: false,
        content: content,
        date: new Date().getTime()
      }
    })
  }, [])
  // deps를 빈 배열로 놔둠 => Mount 될 때에만 함수 생성, 그 뒤로는 생성 X


  // UPDATE (체크박스 기능) (+ 최적화)
  const onUpdate = useCallback((targetId) => { // 
    dispatch({
      type: "UPDATE",
      targetId: targetId
    })
  }, [])


  // 일정 삭제 기능 (+ 최적화)
  const onDelete = useCallback((targetId) => { 
    dispatch({
      type: "DELETE",
      targetId: targetId
    })
  }, [])

 

 

 

---

 

 

출처

한입 크기로 잘라먹는 리액트