JSON은 문자열 형태로 데이터를 표현하는 포맷으로 {}로 감싸진 객체 또는 []로 감싸진 배열의 형태를 갖음
외부 소스에서 데이터를 가져와서 그것을 React 컴포넌트 내에서 사용할 수 있는 형태로 변환하는 과정. 이를 통해 JSON 데이터에 접근하고, 필요한 정보를 추출
Promise는 JavaScript에서 비동기 작업을 처리하기 위한 객체이며, 주로 API 요청이나 파일 읽기 같은 비동기 작업의 결과를 다루기 위해 사용
브라우저의 내장 API로 외부 데이터와의 네트워크 요청을 처리하기 위해 사용
const [A, setA] = useState([]);
//빈 배열로 받아주기. 빈 배열로 초기화하여 컴포넌트가 렌더링될 때 오류를 방지.
//1번째 렌더링시에는 데이터가 담길 state가 초기화되고 원하는 데이터가 state에 담김
fetch(url) // url에 요청 (이 요청은 promise를 반환)
.then(data => data.json())
// 응답을 JSON으로 파싱 (첫번째 then에서 성공적으로 promise가 완료되면, 응답(Response)을 JSON 형식으로 파싱)
.then(json => {
//두 번째 then에서, 첫 번째 then에서 반환된 JSON 데이터를 받을 수 있다. 이 데이터는 Promise로 변환된 결과
console.log(json);
setA(json.items); // items 배열을 상태에 저장
// 두 번째 then의 파라미터로 받은 JSON 데이터에서 items 키를 사용하여 그 값을 배열로 가져오고, 이 배열을 setList와 같은 상태 변경 함수로 전달
});
useEffect(() => {
fetch함수();
}, []);
컴포넌트가 처음 렌더링될 때, useState 훅을 사용하여 상태를 빈 배열로 초기화합니다.
예를 들어, const [data, setData] = useState([]);는 data의 초기값을 빈 배열([])로 설정합니다.
useEffect 훅은 컴포넌트가 처음 렌더링된 후에 실행됩니다. 이 훅 내에서 비동기 함수를 정의하고 호출하여 데이터를 가져옵니다.
데이터가 로드되는 동안 fetch 호출로 인해 비동기 작업이 수행됩니다.
데이터가 로드되기 전에는 data가 빈 배열이기 때문에, UI는 빈 상태로 렌더링됩니다. 예를 들어, "Loading..."이라는 메시지를 표시할 수 있습니다.
데이터 로딩 후 렌더링
fetch 함수가 API에 요청을 보내고, 응답이 도착하면 데이터를 JSON으로 변환합니다.
파싱된 데이터를 setData를 통해 상태로 업데이트합니다.
setData 호출로 인해 상태가 업데이트되면, React는 자동으로 컴포넌트를 다시 렌더링합니다.
이 때, data는 이제 API에서 받은 실제 데이터로 업데이트된 상태입니다.
컴포넌트는 최신 data를 기반으로 다시 렌더링되어, 실제 데이터(예: 비디오 리스트, 사용자 정보 등)를 화면에 표시합니다.
import React, { useState, useEffect } from 'react';
function MyComponent() {
// 1. 상태를 빈 배열로 초기화합니다.
const [data, setData] = useState([]); // 데이터 상태
const [loading, setLoading] = useState(true); // 로딩 상태
// 2. 컴포넌트가 렌더링된 후에 데이터를 요청합니다.
useEffect(() => {
// 3. 비동기 함수 정의
const fetchData = async () => {
try {
// 4. API 요청을 보내고 응답을 기다립니다.
const response = await fetch('https://api.example.com/data');
// 5. 응답 데이터를 JSON으로 변환합니다.
const result = await response.json();
// 6. 변환된 데이터를 상태로 업데이트합니다.
setData(result.items);
// 7. 데이터 로딩이 완료되었음을 나타냅니다.
setLoading(false);
} catch (error) {
// 8. 오류가 발생한 경우 오류를 출력하고 로딩 상태를 종료합니다.
console.error('Error fetching data:', error);
setLoading(false);
}
};
// 9. 비동기 함수 호출
fetchData();
// 10. 빈 의존성 배열을 전달하여 컴포넌트가 처음 렌더링될 때만 실행되도록 합니다.
}, []);
// 11. 로딩 중일 때 사용자에게 로딩 메시지를 표시합니다.
if (loading) {
return <p>Loading...</p>;
}
// 12. 데이터가 로드된 후, 상태를 기반으로 UI를 렌더링합니다.
return (
<ul>
{data.map(item => (
// 13. 데이터 항목을 리스트로 표시합니다.
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
export default MyComponent;