작성
·
414
0
const getData = async () => {
const res = await fetch(
"https://jsonplaceholder.typicode.com/comments"
).then((res) => res.json());
const initData = res.slice(0, 20).map((it) => {
return {
author: it.email,
content: it.body,
emotion: Math.floor(Math.random() * 5) + 1,
created_date: new Date().getTime(),
id: dataId.current++,
};
});
setData(initData);
};
useEffect(() => {
getData();
}, []);
const getDiaryAnalysis = useMemo(() => {
console.log("일기분석");
|
처음 App 컴포넌트 실행이 되었을 때 useEffect를 통해 getData는 데이터를 불러오고 있는 상태이고(비동기가 맞을까요?)
getDiaryAnalysis가 실행되면서 처음 "일기분석" 실행되고
getData에서 데이터를 불러 온 상태가 되면 useEffect가 mount되면서 App컴포넌트가 한번 더 실행되는게 맞을까요?
답변 1
0
안녕하세요 이정환입니다.
App컴포넌트는 첫 마운트 때 한번 호출됩니다.
그리고 getData 함수에서 setData를 호출해 상태를 업데이트 했을 때 한번 더 호출됩니다.
따라서 App 컴포넌트(함수)는 총 두번 호출되게 됩니다.
이때 getDiaryAnalysis 함수를 호출하는 코드를 useMemo로 메모이제이션 해주지 않으면 이 함수가 컴포넌트가 리렌더 될 때 마다 즉 호출될 때 마다 계속 다시 실행됩니다.
따라서 useMemo를 이용해 불필요한 재 호출을 방지하는 것 입니다.
useEffect가 마운트 되는것은 아닙니다.
마운트의 주체는 컴포넌트이며 이는 컴포넌트가 처음 화면에 등장한다는 의미입니다.