React에서 서버와 통신하는 과정을 구현하는 방법

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;