useState, useEffect 사용공식 필요합니다

React에서 useState와 useEffect 훅을 사용하여 API로부터 데이터를 불러오고 화면에 표시하는 간단한 예제를 들겠습니다. 이 예제에서는 데이터를 가져오기 위해 'fetch' 함수를 사용하겠습니다. #1 먼저, 아래와 같이 'useState'와 'useEffect'를 임포트합니다. #2 다음으로, 컴포넌트를 생성하고 'useState'를 사용하여 데이터를 저장할 상태 변수를 선언합니다. #3 이제 'useEffect'를 사용하여 컴포넌트가 마운트될 때 API로부터 데이터를 불러옵니다. 불러온 데이터를 'setData' 함수를 통해 상태 변수에 저장합니다. #4 마지막으로, 데이터를 화면에 표시합니다. 데이터가 로드되기 전에는 로딩 메시지를 표시하도록 합니다. 아래의 코드를 참고하여 API로부터 데이터를 불러오고 화면에 표시하는 기본 구조를 구현할 수 있습니다. 사용하고 있는 API와 데이터 구조에 따라 적절히 코드를 수정하여 사용하시면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#1
import React, { useState, useEffect } from 'react';

#2
function App() {
  const [data, setData] = useState(null);

#3
  useEffect(() => {
    async function fetchData() {
      const response = await fetch('API_URL'); // 여기에 실제 API URL을 입력하세요.
      const result = await response.json();
      setData(result);
    }

    fetchData();
  }, []); // 빈 배열을 전달하여 컴포넌트가 마운트될 때만 실행되도록 합니다.

#4
  return (
    <div>
      {data ? (
        data.map((item) => (
          // 데이터를 표시하는 로직을 작성하세요.
          <div key={item.id}>{item.name}</div>
        ))
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default App;