useEffect를 사용하지 않고 axios result를 출력하면 왜 2개나 출력되나요?
554
작성한 질문수 6
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이 다시 불리며 -> 변경된 값을 화면에 업데이트 시켜줄 수 있습니다.
[해결]그랩님 답변 주세요.
0
159
2
그랩님의 답변을 기다립니다/102강 전반적인 에러
0
140
2
[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.
0
122
2
[재질문][그랩님 답변 부탁드립니다]101강
0
135
2
[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문
0
96
2
Ngrok 설치 후 forwarding Url 에러
0
129
2
[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.
0
214
2
Ngrok 설치 후 forwarding Url로 연결 불가
0
133
1
그랩님,[꼭] 답변 부탁드립니다.
0
64
1
[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.
0
145
1
6강/7강 수업
0
49
1
그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.
0
98
2
그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.
0
133
2
[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
0
88
1
Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
0
126
2
일반적인 css 꾸미기에서 width와 height의 값?
0
86
2
Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법
0
191
1
그랩마켓 웹화면 구현하기 -2 질문입니다.
0
118
1
react에 반영이 되지 않습니다.
0
233
1
터미널 npm install -g create-react-app 작성 후 오류
0
418
1
create-react-app my app 실행 시 에러
0
349
2
포스트맨 질문
0
94
1
<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.
0
255
2
그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.
0
468
2