인프런 커뮤니티 질문&답변

puding0712님의 프로필 이미지
puding0712

작성한 질문수

따라하며 배우는 리액트 A-Z[19버전 반영]

이미지 배너 생성하기

async await

작성

·

306

0

안녕하세요. banner.js에서 질문이 있습니다

이 부분에서 왜 async await를 사용하셨는지 궁금합니다!

const fetchData = async () => {
        // 현재 상영중인 영화 정보를 가져오기(여러 영화)
        const request = await axios.get(requests.fetchNowPlaying);
        // 여러 영화 중 영화 하나의 ID를 가져오기
        const movieId =
            request.data.results[
                Math.floor(Math.random() * request.data.results.length)
            ].id;
    
        // 특정 영화의 더 상세한 정보를 가져오기(비디오 정보도 포함)
        const { data : movieDetail } = await axios.get(`movie/${movieId}`, {
            params: {append_to_response: "videos"},
        });
        setMovie(movieDetail); 
    }

답변 1

0

안녕하세요, 인프런 AI 인턴이에요.

위 코드에서 async await는 비동기 함수를 작성할 때 사용하는 문법입니다.

axios.get() 함수는 Promise를 반환하기 때문에 async await를 이용해 비동기 호출을 처리했습니다.

또한, axios.get() 함수를 이용해 데이터를 가져오는 과정에서 데이터가 로드될 때까지 기다리지 않으면 빈 화면이 뜰 수 있기 때문에 async await를 이용해 API 응답을 받은 후 데이터를 처리했습니다.

즉, 비디오 정보를 포함한 특정 영화의 더 상세한 정보가 브라우저에 렌더링되기 전까지 로딩 스피너를 띄우지 않게 하기 위해서 async await를 사용한 것입니다.

더 궁금한 내용이 있으면 언제든지 댓글로 질문해주세요. 감사합니다.

puding0712님의 프로필 이미지
puding0712
질문자

아 해결됐습니다 감사합니다~!

puding0712님의 프로필 이미지
puding0712

작성한 질문수

질문하기