[React] Promise & async/await

I'm Your Cho-i·2022년 9월 26일
0

React

목록 보기
8/13
post-thumbnail

📌 Promise

  • Promise는 콜백 지옥 같은 코드가 형성되지 않게 하는 방안으로 ES6에 도입된 기능.
    (비동기 처리에서 사용되는 객체로, promise가 상태를 관리하여 다른 코드가 비동기적으로 실행될 수 있도록 만드는 객체)
  • 여러 작업을 연달아 처리한다고 해서 함수를 여러 번 감싸는 것이 아니라 .then을 사용하여 그다음 작업을 설정하기 때문에 콜백 지옥이 형성되지 않음.
    👉 axios 또한 promise를 기반으로 만들어짐

콜백 지옥은 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

  • async/awaitPromise를 더욱 쉽게 사용할 수 있도록 해 주는 ES2017(ES8) 문법.
  • async는 함수 이름의 제일 앞에, await는 결과를 기다릴 함수 앞에 작성.
    (이렇게 하면 Promise가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있음)
    👉 async는 함수에서 비동기 처리를 위한 promise 동작을 한다는 것을 명시
    👉 await은 호출되는 함수가 적절한 결과를 반환할 때까지 기다리도록 동작

📌 API 호출

  • useState를 이용해 상태 관리, useEffect를 이용해 API를 불러옴.
    👉 useEffect 안에서 async/await 함수를 선언하고 그 안에 setState()를 이용해 state를 관리
	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

profile
https://github.com/Cho-i

0개의 댓글