이것저것 스터디📚/JavaScript
React에서 서버와 통신하는 과정을 구현하는 방법
pocoding
2023. 11. 21. 18:22
1. 사용자 상호작용으로 인한 서버 통신
- 사용자의 상호작용으로 인한 서버 통신은 예를 들어 "버튼 클릭으로 서버와 통신", "사용자 입력으로 서버에 요청", "사용자 상호작용에 의한 서버 통신" 등을 의미한다.
- 사용자가 버튼을 클릭하거나 어떤 입력을 하면 이벤트 핸들러가 실행되고, 그 내부에서 서버와의 통신이 이루어지는 것을 의미한다.
import React, { useState } from 'react';
function App() {
const [data, setData] = useState(null);
const fetchData = async () => {
try {
// 서버와 통신하여 데이터 가져오기
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error('데이터 가져오기 오류:', error);
}
};
return (
<div>
<button onClick={fetchData}>데이터 가져오기</button>
{data && <div>{data.message}</div>}
</div>
);
}
export default App;
2. 페이지 진입 시 초기 데이터 로드
- 페이지가 처음으로 렌더링될 때, 페이지 진입 시에 서버와 통신하여 초기 데이터를 가져오는 상황을 가리킨다.
- 페이지 진입 시에 서버와의 통신은 초기 데이터 로드 및 컴포넌트가 마운트될 때 발생한다.
- 컴포넌트를 컴포넌트 외부와 통신할 수 있도록 해주는 useEffect 훅을 사용할 수 있다.
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
// 페이지 진입 시 서버와 초기 데이터 가져오기
const response = await fetch('https://api.example.com/initialData');
const result = await response.json();
setData(result);
} catch (error) {
console.error('초기 데이터 로딩 오류:', error);
}
};
fetchData(); // 페이지 진입 시 데이터 로드
}, []);
return (
<div>
{data ? (
<div>{data.message}</div>
) : (
<div>데이터 로딩 중...</div>
)}
</div>
);
}
export default App;