React Hook useEffect, useCallback 사용관련

Question

상태데이터를 fetch 하는 것과 관련해서(keywordList) 무한루프가 발생했습니다.그래서 아래와 같이 Hook를 사용하여 처리하였는데 관련해서 질문 드리겠습니다.1) 방법 1에서 useCallBack()를 사용하고 나서, 이후 useEffect() 함수 부분을 따로 사용하지 않아도 정상적으로 동작합니다. 굳이 useEffect()를 사용하지 않아도 되는 걸까요? useCallBack()함수 자체가 memorize 기능이 있어서 특정한 타이밍 (이벤트 호출시)에만 사용한다고 한다고 해서요....2) 방법 2에서 fetch한 결과를 상태데이터 keywordList에 저장하는데, 왜 의존성 배열을 [keywordList]가 아닌 빈 배열[]로 사용해야 하는지 궁금합니다. 실제로 [keywordList]로 사용시 다시 무한 루프가 발생합니다.import { useEffect, useState, useCallback } from "react"; import Nodata from "./noData"; import checkUserId from "./checkUserId"; export default function Keyword(){ checkUserId(); const [keywordList, setKeywordList] = useState([]); console.log(keywordList); console.log("keywordListLength : " + keywordList.length); 방법 1) const getData = useCallback(async ()=> { const fetchdata = await fetch("http://localhost:8080/top10") .then((response) => response.json()) .then((data) => {setKeywordList(data)}) .catch((error)=>{ console.log(error); })},[]) useEffect(()=>{ getData(); },[getData]) 방법 2) const getData = async ()=> { await fetch("http://localhost:8080/top10") .then((response) => response.json()) .then((data) => {setKeywordList(data)}) .catch((error)=>{ console.log(error); })} useEffect(()=>{ getData(); },[]) return(

인기 키워드 목록입니다.

{keywordList.length > 0 ? ( {keywordList.map((list, index) => ( ))}

키워드명	검색 수
{list.keyword}	{list.cnt}

) : }

) }

코린이듈리 · Accepted Answer

우선 알고 계시겠지만 useCallback 훅은 함수를 재사용 하기 위해 사용하는 훅입니다.리액트에서 컴포넌트가 리렌더링 되면 컴포넌트 안의 함수는 다시만들어집니다.즉, 함수의 주소값이 바뀝니다. 이는 자식 컴포넌트에 영향을 줄 수 있습니다.하지만 useCallback을 사용하면의존성 배열에 있는 인자의 값이 업데이트 되지 않는 한 함수의 주소값은 바뀌지 않습니다.그런데 여기서 keywordList를 넣었다고 생각해보면 아래의 과정을 거칠겁니다.컴포넌트 최초 렌더링시 keywordList가 변경됨useCallback의 인자중 하나인 keywordList가 변경됐으므로 안의 함수 재실행2를 무한반복이렇게 되는겁니다.두번째 방식은 현재 코드에서는 자식 컴포넌트가 없어서 문제가 없습니다.그런데 만약 button 태그를 따로 자식 태그로 만들어서 getData 함수를 props로 넘겨준다면 부모 컴포넌트가 리렌더링 될때마다 getData 함수도 다시 만들어지므로 자식 컴포넌트는 리렌더링을 할것입니다.이를 방지하기 위해 사용하는게 useCallback 훅입니다.

React Hook useEffect, useCallback 사용관련

1개의 답변

#useeffect 목록