인프런 커뮤니티 질문&답변
작성한 질문수
전체적인 흐름 질문
작성
·
240
1
렌더링이 계속 일어나면 네트워크 통신이 일어나서 useEffect를 사용하신다고 했는데 렌더링은 딱 한번만 되는거 아닌가요?
그리고 11분 50초 화면에서 전체적인 흐름이 제가 이해한 것과 같은지 알고싶어요
const[product,setProduct] = useState(null);
이 코드로 product에 null값이 들어가고
axios의 get 메서드로 url의 주소로 네트워크 통신이 일어난 뒤, 처리시간이 걸리기 때문에 바로 console.log(product)가 호출돼서 처음에 null 값이 출력됐고, 네트워크 통신이 완료된 뒤에 then 메서드가 실행돼서 result.data 값을 받고 setProduct 메서드로 product에 담은 뒤, console.log(product);로 상품이 출력된 것이라고 이해했는데 맞나요?
마지막으로 console.log는 어떻게 2번 호출된거죠??
답변 1
0
그랩
지식공유자
좋은 질문 감사합니다.
우선 말씀하신 순서로 동작을 하는 게 맞습니다.
렌더링(코드를 다시 위에서 읽어 return하는 과정)은 state나 props가 바뀌었을 때 새롭게 불리게 됩니다. setProduct 메소드를 통해 product state가 업데이트 되면 새롭게 렌더링이 발생합니다. 이 때 useEffect는 불리지 않고(useEffect의 두번째 인자로 []를 넣어 딱 한 번 호출됩니다) console.log에는 업데이트된 product가 찍히게 되는 거죠!