-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
Custom Hook 부분 질문
21.05.07 13:08 작성 조회수 123
0
import React, { useState, useCallback } from "react";
//custom Hook으로 만들기
export default function (initialValue = null) {
console.log("몇번 렌더링?");
const [Value, setValue] = useState(initialValue);
const handler = useCallback((e) => {
setValue(e.target.value);
}, []);
return [Value, handler];
}
제가 바르게 이해하고 있다면, useCallback은 필요없지 않은가요?
useCallback는 함수를 재정의 하지 않고 , 1. 콜백함수가 호출되면서 2.depth부분이 바뀌었을때의 두 조건이 충족해야 다시 재정의 한다고 알고 있습니다. 위 커스텀훅에서는 [] depth가 비어져있기에 첫 마운트 했을때만 작동하고 어떠한 움직임도 없어야 하기에 함수 내 setValue의 기능을 수행 하지 않는다는 뜻인데, console.log('몇번 렌더링');으로 찍어보니깐 다른 곳에서 useInput 을 사용할때마다 커스텀훅 페이지를 리렌더링 하기때문에 애초에 useCallback이 무의미한 것이 아닌가요?
애초에 다른 모듈에 있기에 useCallback은 의미가 없는게 아닌가 궁금합니다
답변을 작성해보세요.
0
조현영
지식공유자2021.05.07
해당 커스텀 훅이 재실행될 때마다 handler 함수를 계속 새로 생성하는 것을 막는 역할을 합니다. 커스텀훅은 컴포넌트가 렌더링될 때마다 재실행되고요.
"1. 콜백함수가 호출되면서" 이 부분이 틀렸습니다.
답변 1