인프런 커뮤니티 질문&답변
작성한 질문수
useEffect를 사용하지 않고 axios result를 출력하면 왜 2개나 출력되나요?
작성
·
552
1
axios.get('https://7794930e-4eae-438b-a0e7-457c50546b5c.mock.pstmn.io/products')
.then(function(result){
console.log('axios 성공', result);
})
.catch(function(err) {
console.error(err);
console.log('ERROR입니다'. err);
})이렇게 작성하면 console.log에 'axios 성공 ... ' 이 텍스트가 2개나 출력되던데 왜 2번이나 출력되나요?
+
추가 질문입니다.
const [products, setProducts] = React.useState()로 하단에 axios로 가져온 값을 렌더링 시켜주는 것 같은데 어떤 방법으로 데이터를 알고 변경해주는건가요?
답변 1
1
그랩
지식공유자
useEffect를 사용하지 않으면, React의 컴포넌트가 렌더링 될때마다 함수의 코드가 전부 재실행되게 됩니다 (렌더링이 되는 기준은 state, props가 변경되었을 때)
그리고 React의 기본 컴포넌트 특성상 처음에 렌더링이 두 번 됩니다! 그래서 useEffect로 호출 횟수를 통제하는 거죠.
useState로 products라는 이름의 state를 선언한 후 axios를 통해 얻은 결과를 setProducts를 통해 products에 업데이트 시킵니다. 그러면 state가 변경되었으므로 새롭게 렌더링이 되고 -> return이 다시 불리며 -> 변경된 값을 화면에 업데이트 시켜줄 수 있습니다.