[React] 개발자 도구 콘솔창에서 왜이렇게 많이 출력 될까요..?

Question

import styles from "../MovieListCard.module.css"; async function test(url) { const responses = await fetch(url).then(response => response.json()); const result = responses; console.log(result); } function MovieListCard({ id, coverImg, title, summary, genres }) { const apiKey = `fbeef6513810f14fbbc39c545323791e`; const movieId = `8`; const url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${apiKey}`; test(url); return (<>

) } export default MovieListCard;React 공부중인 초보자입니다..다름이 아니라 영화 api를 받아서 잘들어오는지 확인하고 있는데 이상한것이 코드를 보시면 아시겠지만 영화 id가 8 인 api한가지만 불러오고 있는데 현재 사진의 콘솔창엔 너무 많이 출력이 되는데 왜이런것인지 알 수 있을까요?심지어 사진상의 (20) [ { ...} , { ... } , {...} , ..... ] 부분은 제가 출력하고있는게 아님에도 출력이 되고 있어요..

킁킁탐정 · Accepted Answer

react 구조상 fetch를 컴포넌트 내부에서 직접적으로 사용하게 되면 MovieListCard 컴포는트가 렌더링/리렌더링되는 모든 경우에 MoveListCard 함수가 재실행되기 때문에 여러번 출력되게 됩니다.useEffect를 사용하거나 react-query같은 다른 도구를 사용하시길 권해드립니다.무엇보다 https://react.dev/ 의 문서를 모두 읽어보시면 원인과 해결책이 자세하게 나와있습니다.

[React] 개발자 도구 콘솔창에서 왜이렇게 많이 출력 될까요..?

1개의 답변

#jsx 목록