인프런 커뮤니티 질문&답변
작성한 질문수
section 17 useEffect 부분
해결된 질문
작성
·
216
0
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라서 그런 걸까요 ? ??답변 2
0
안녕하세요! 냐냐님!
setState의 내부적으로 들어가면, 더 복잡한 이유들 뿐만 아니라 state 리렌더 조건 등이 함께 고려되어야 하겠지만, 해당 수업 당시에 설명드렸던 내용은 API로 받아오는 사진이 매번 달라지는 것에 대한 설명이 맞습니다!^^
0
안녕하세요, 인프런 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를 업데이트할 수 있게 됩니다.