section 17 useEffect 부분

Question

const [dog, setDog] = useState(""); const res = axios.get("https://dog.ceo/api/breeds/image/random"); console.log(res.data.message); // 사진 주소 setDog(res.data.message); 위 코드에서 강사님이 설명 해주실 때, res 값이 변경되고 state 값이 바뀌니까 계속 무한루프로 리렌더링이 된다고 하셨는데, 계속 state 값이 바뀌는 이유가 이 api 자체가 fetch 할 때마다 랜덤으로 사진이 바뀌는 api라서 그런 걸까요 ? ??

노원두 · Answer

안녕하세요! 냐냐 님! setState의 내부적으로 들어가면, 더 복잡한 이유들 뿐만 아니라 state 리렌더 조건 등이 함께 고려되어야 하겠지만, 해당 수업 당시에 설명드렸던 내용 은 API로 받아오는 사진이 매번 달라지는 것 에 대한 설명이 맞습니다!^^

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 냐냐님, 질문하신 useEffect와 관련된 내용은 주신 정보에 따른 것이 아니라 일반적인 React의 동작 원리를 기반으로 설명이 가능합니다. 여러분이 작성하신 코드에서는 axios.get 을 통해 HTTP 요청으로 개 사진을 가져오는 부분이 있습니다. 이 코드는 컴포넌트가 렌더링될 때마다 실행되고 있습니다. 그리고 setDog 함수를 통해 state를 갱신하게 됩니다. 이렇게 될 경우, React는 state가 업데이트됨을 감지하고 컴포넌트를 다시 렌더링하는 과정을 반복하게 되죠. 여기서 문제는 API 자체가 랜덤한 사진을 제공한다는 점과는 별개입니다. state가 변경될 때마다 컴포넌트 렌더링이 발생하고, 그 렌더링 과정에서 다시 API 요청이 이루어지면서 state가 업데이트되고, 이로 인해 또 다시 렌더링이 발생하는 무한 루프에 빠지게 되는 것입니다. 이 문제를 해결하기 위해 보통은 useEffect 훅을 사용하여, 컴포넌트가 마운트될 때 단 한 번만 API 요청이 이루어지도록 할 수 있습니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다. useEffect(() => { axios.get("https://dog.ceo/api/breeds/image/random") .then(res => { setDog(res.data.message); }); }, []); 위와 같이 useEffect 내부에 API 요청을 넣고, 의존성 배열(dependency array)을 빈 배열로 설정하면, 컴포넌트가 처음 마운트될 때만 API 요청이 실행되어 무한 루프를 방지할 수 있습니다. 이렇게 useEffect 를 사용하면, 데이터를 가져오는 로직이 렌더링과 분리되어, 필요한 시점에만 데이터를 가져오고 state를 업데이트할 수 있게 됩니다.