이전 실습에서는 여러 휴양림 정보를 fetch 해와도 결과 화면에서는 하나의 휴양림 정보만 보여주었다. 이번 실습에서는 map()을 활용해 API로 인출한 여러 데이터 출력하겠다.

fetch Data 정보

const response = await axios.get(URL, {
  params: {
    serviceKey: serviceKey,
    currentPage: 1,
    perPage: 4, // 여기서 perPage 값을 설정
  },
});

• URL 을 통해 API 데이터를 가져올 것인데, params 를 보면 알 수 있듯이 perPage 가 4라는 것을 알 수 있다. 즉, 4개의 휴양림 정보를 가져온다는 것이다.

map()을 활용해 API로 인출한 여러 데이터 출력

return (
  <div className="App">
    {data.body.map((item, index) => (
      <div key={index}>
        <p>휴양림명 : {item.NM}</p>
        <p>위치 : {item.LC}</p>
        <p>면적 : {item.AR}</p>
        <hr />
      </div>
    ))}
  </div>
);

• map 함수를 사용한 동적 렌더링
  • data.body.map((item, index) => ...)를 사용하여 body 배열의 각 항목을 반복해서 출력합니다.
  • 각 항목을 div 태그로 감싸고, key 속성에 index를 사용하여 각 항목에 고유 키를 부여합니다.

map 함수를 사용할 때 key 속성을 설정하는 이유와 이를 올바르게 사용하는 방법

key 속성의 주요 역할

1. 효율적인 업데이트: key 속성을 사용하면 React는 리스트 항목이 추가되거나 제거될 때, DOM을 효율적으로 업데이트할 수 있습니다. key 값이 없다면, React는 리스트를 처음부터 끝까지 비교하여 변경 사항을 찾아야 합니다. key 값이 있으면 특정 항목을 바로 찾아내어 변경할 수 있습니다.
2. 안정적인 식별: key 값은 리스트 항목의 순서가 바뀌거나 항목이 추가되거나 삭제될 때도 안정적으로 각 항목을 식별할 수 있게 합니다. 이로 인해 항목의 상태가 올바르게 유지됩니다.
3. 성능 최적화: 고유한 key 값을 제공하면 React의 재조정(reconciliation) 과정이 최적화되어 불필요한 렌더링을 방지할 수 있습니다.

올바르게 사용하는 방법

key 속성을 설정할 때는 다음과 같은 지침을 따르는 것이 좋습니다:

1. 고유한 값 사용: 각 항목에 대해 고유한 값을 사용해야 합니다. 일반적으로 데이터의 고유한 ID를 사용하는 것이 좋습니다.
2. 배열 인덱스 사용 지양: 배열의 인덱스를 key 값으로 사용하는 것은 추천되지 않습니다. 인덱스는 항목의 순서가 변경되거나 항목이 추가/삭제될 때 고유성을 보장하지 못합니다.
3. 항목이 변경되지 않는 경우에만 인덱스 사용: 만약 리스트 항목이 절대 변경되지 않는다면 인덱스를 사용할 수 있지만, 이는 매우 드문 경우입니다.

결과 화면

전체 소스 코드

src/App.js

import axios from "axios";
import { useState, useEffect } from "react";

const URL =
  "http://apis.data.go.kr/6430000/cbRecreationalForestInfoService/getRecreationalForestInfo?serviceKey=";

const serviceKey = process.env.REACT_APP_API_KEY; // 환경 변수에서 API 키를 가져옵니다

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    try {
      setError(null);
      setData(null);
      setLoading(true);

      const response = await axios.get(URL, {
        params: {
          serviceKey: serviceKey,
          currentPage: 1,
          perPage: 4,
        },
      });

      // 응답 데이터를 콘솔에 출력
      console.log("API Response:", response.data);

      // 응답 데이터가 유효한지 확인합니다
      if (
        response.data &&
        response.data.body &&
        Array.isArray(response.data.body)
      ) {
        setData(response.data);
      } else {
        throw new Error("Invalid API response structure");
      }
    } catch (e) {
      if (e.response) {
        // 서버가 2xx 외의 상태로 응답한 경우
        setError(`Server Error: ${e.response.status}`);
      } else if (e.request) {
        // 요청이 이루어졌지만 응답이 없는 경우 (CORS 문제일 수 있음)
        setError("Network Error: No response received");
      } else {
        // 요청 설정 중에 문제가 발생한 경우
        setError(`Error: ${e.message}`);
      }
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchData();
  }, []);

  // console.log("Service Key:", serviceKey); // 콘솔에 서비스 키를 출력합니다

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!data) return null;

  console.log(data);

  return (
    <div className="App">
      {data.body.map((item, index) => (
        <div key={index}>
          <p>휴양림명 : {item.NM}</p>
          <p>위치 : {item.LC}</p>
          <p>면적 : {item.AR}</p>
          <hr />
        </div>
      ))}
    </div>
  );
}

export default App;