[새싹 성동 2기] 리액트 앱에서 국가와 국기 정보를 출력하는 방법

이전 글에서 Axios와 JQuery를 통해 국가와 국기 정보를 출력한 적이 있습니다.

이번에는 국가명과 국기 정보를 API를 통해 가져와서 화면에 출력하는 리액트 앱을 작성하는 방법을 알아보겠습니다. 우리는 axios를 사용하여 데이터를 가져오고, 이를 리액트 컴포넌트에서 효과적으로 처리하는 방법을 설명할 것입니다. 이 예제에서는 restcountries.com API를 사용하여 국가명과 국기 정보를 받아옵니다.

 

1. axios 모듈 설치

먼저 axios 모듈을 설치해야 합니다. axios는 HTTP 요청을 보내고 응답을 처리할 수 있는 JavaScript 라이브러리입니다.

터미널에서 다음 명령어를 실행하여 axios를 설치합니다:

npm install axios

 

2. 국기 정보 출력하기

국가와 국기 정보를 출력하는 리액트 앱을 작성해 보겠습니다.

App.js

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

// 각 국가와 국기 정보를 출력하는 컴포넌트
const NationalFlag = ({ flag }) => {
  return (
    <li>
      <img src={flag.flags.png} alt={`${flag.name.common} flag`} />
      <p>{flag.name.common}</p>
    </li>
  );
};

// 국가별 국기 정보를 가져와 출력하는 컴포넌트
const NationalFlags = () => {
  const [flags, setFlags] = useState([]); // 국가와 국기 정보 상태

  // 컴포넌트가 마운트되었을 때 실행
  useEffect(() => {
    axios
      .get('https://restcountries.com/v3.1/all?fields=name,flags') // API 요청
      .then(res => {
        if (res && res.data) {
          setFlags(res.data); // 응답 데이터로 상태 업데이트
        }
      })
      .catch(err => console.log(err)); // 에러 처리
  }, []);

  return (
    <>
      <h1>국가별 국기 정보</h1>
      <ul>
        {/* 국가 정보를 국기 컴포넌트로 출력 */}
        {flags.map(flag => <NationalFlag key={flag.name.common} flag={flag} />)}
      </ul>
    </>
  );
};
export default NationalFlags;




import NationalFlags from "./NationalFlags";
function App() {
  return (
    <>
      <NationalFlags />
    </>
  );
}

export default App;

 

코드 설명

• NationalFlag 컴포넌트: 이 컴포넌트는 각 국가의 국기 이미지와 국가명을 출력합니다.
• NationalFlags 컴포넌트: axios를 사용하여 API에서 국가와 국기 정보를 가져오고, 이를 flags 상태에 저장합니다. 그리고 flags 상태에 저장된 데이터는 NationalFlag 컴포넌트를 통해 출력됩니다.

3. 국가명 검색 기능 추가하기

국가명을 검색할 수 있는 기능을 추가해 보겠습니다. 사용자가 입력한 검색어에 따라 해당 국가의 국기만 필터링하여 보여줍니다.

국가 검색 기능 추가

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

// 국가와 국기 정보를 출력하는 컴포넌트
const NationalFlag = ({ flag }) => {
  return (
    <li>
      <img src={flag.flags.png} alt={`${flag.name.common} flag`} />
      <p>{flag.name.common}</p>
    </li>
  );
};

// 국가별 국기 정보를 가져와 출력하는 컴포넌트
const NationalFlags = () => {
  const [flags, setFlags] = useState([]); // 국가와 국기 정보 상태
  const [search, setSearch] = useState(''); // 검색어 상태
  const [filtedFlags, setFiltedFlags] = useState([]); // 필터링된 국기 상태

  // 검색어가 변경될 때 실행되는 함수
  const changeSearch = e => {
    const searchValue = e.target.value;
    setSearch(searchValue);
    const results = flags.filter(flag => flag.name.common.toLowerCase().includes(searchValue.toLowerCase()));
    setFiltedFlags(results);
  };

  // 컴포넌트가 마운트되었을 때 실행
  useEffect(() => {
    axios
      .get('https://restcountries.com/v3.1/all?fields=name,flags') // API 요청
      .then(res => {
        if (res && res.data) {
          setFlags(res.data); // 응답 데이터로 상태 업데이트
          setFiltedFlags(res.data); // 초기 상태로 필터링된 데이터 설정
        }
      })
      .catch(err => console.log(err)); // 에러 처리
  }, []);

  return (
    <>
      <h1>국가별 국기 정보</h1>
      <input 
        type="text" 
        value={search} 
        onChange={changeSearch} 
        placeholder="국가명 검색" 
      />
      <ul>
        {/* 필터링된 국가 정보를 국기 컴포넌트로 출력 */}
        {filtedFlags.map(flag => <NationalFlag key={flag.name.common} flag={flag} />)}
      </ul>
    </>
  );
};

export default NationalFlags;


import NationalFlags from "./NationalFlags";

function App() {
  return (
    <>
      <NationalFlags />
    </>
  );
}

export default App;

 

코드 설명

• search: 검색어 상태를 관리합니다.
• changeSearch: 사용자가 검색어를 입력할 때마다 flags 목록에서 해당 국가명을 포함하는 국기만 필터링하여 filtedFlags 상태에 업데이트합니다.
• filtedFlags: 검색어로 필터링된 국기 목록을 저장하고, 이를 출력합니다.
• input 필드: 사용자가 국가명을 검색할 수 있도록 입력 필드를 제공합니다.

앱을 실행하면 다음과 같은 화면을 볼 수 있습니다.

 

 

axios를 사용해 API에서 국가와 국기 정보를 가져오고, 이를 리액트 앱에서 출력하는 방법을 알아보았습니다. 또한, 검색 기능을 추가하여 사용자가 원하는 국가를 쉽게 찾을 수 있도록 했습니다.

 

 

*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.