useEffect의 두 번째 매개변수로 빈 배열을 주어서 첫 컴포넌트 마운트 시에만 render하도록 해야한다!
그렇지 않으면 render <-> useEffect 무한 지옥에 빠진다...ㅎㅎ
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const { applicationID } = useParams();
const [applicationData, setApplicationData] = useState();
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios({
method: 'get',
url: `/application/${applicationID}`,
baseURL: 'http://localhost:3001/api',
timeout: 2000,
});
setApplicationData(response.data);
} catch (error) {
console.error(error);
}
};
fetchData();
}, []);
return (
<S.Application>
{applicationData ? <ApplicationView values={applicationData} /> : null}
</S.Application>
);
}
export default App;
async 함수를 resolved promise를 반환한다. 하지만 effect hook은 아무것도 반환하지 않거나 메모리 누수를 방지하기 위한 clean-up 함수만을 반환해야 한다. 따라서 useEffect에서 async를 직접적으로 사용하는 것이 허용되지 않기 때문에 저렇게 간접적인 방식으로 사용했다.
/* 잘못된 예시
* Warning: useEffect function must return a cleanup function or nothing.
* Promises and useEffect(async () => ...) are not supported, but you can call
* an async function inside an effect.
*/
useEffect(async () => {
try {
const response = await axios({
method: 'get',
url: `/application/${applicationID}`,
baseURL: 'http://localhost:3001/api',
timeout: 2000,
});
setApplicationData(response.data);
} catch (error) {
console.error(error);
}
}, []);