Data | Fetch & Rendering

📍 fetch를 사용하여 데이터 가져오기

• https://www.themoviedb.org/ 에서 영화 API를 사용한다.

fetch를 통해 받아온 데이터를 json()으로 변환하여 results라는 변수에 저장한다. 그리고 그 변수를 movies라는 배열에 저장한다.

이 때 fetch를 통해 데이터를 받아올 때 까지 기다리기 위해 비동기방식인 async&await를 사용한다.

📍 화면에 렌더링하기

API로 받아온 배열 데이터를 화면에 렌더링하기 위한 순서는 아래와 같다.

1. 배열 데이터를 저장할 state 생성 후 빈 배열 로 초기값 지정(값이 없으면 map()함수 실행 시 오류 발생)
2. API로 받아온 데이터 state에 저장
3. map()함수를 통해 return (주로 배열데이터를 UI요소로 구성할때 map함수를 많이 쓴다.)

초기 state를 배열로 지정하지 않고 사용하는 방법도 있다. optional chaining 연산자를 사용하면 된다.
optional chaning은 참조나 기능이 undefined 또는 null일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공한다.

• && 사용
• ?. 사용

두 가지 모두 결과는 동일하지만 ?. 연산자가 더 최신기능이다.