Promise
는 콜백 지옥 같은 코드가 형성되지 않게 하는 방안으로 ES6에 도입된 기능.promise
가 상태를 관리하여 다른 코드가 비동기적으로 실행될 수 있도록 만드는 객체).then
을 사용하여 그다음 작업을 설정하기 때문에 콜백 지옥이 형성되지 않음.콜백 지옥은 JavaScript를 이용한 비동기 프로그래밍시 발생하는 문제로서, 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상
step1(function (value1) { step2(function (value2) { step3(function (value3) { step4(function (value4) { step5(function (value5) { step6(function (value6) { // Do something with value6 }); }); }); }); }); });
async/await
는 Promise
를 더욱 쉽게 사용할 수 있도록 해 주는 ES2017(ES8) 문법.async
는 함수 이름의 제일 앞에, await
는 결과를 기다릴 함수 앞에 작성.Promise
가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있음) const { category } = useParams();
const [articles, setArticles] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const res = await axios.get('URL');
setArticles(res.data.articles);
} catch (e) {
console.log(e);
}
};
fetchData();
}, [category]);
참고 : https://velog.io/@combi_jihoon/React-Promise-asyncawait