section 17 useEffect 부분

안녕하세요! 냐냐님!

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

안녕하세요, 인프런 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를 업데이트할 수 있게 됩니다.