useEffect를 사용하여 api를 사용해보자

이번에는 useEffect를 사용해서 api를 불러내는 예제를 작성해 보겠습니다.

 

DataDisplay라는 컴포넌트를 만들어 줍니다.

 

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

function DataDisplay() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = async () => {
    const response = await fetch(`https://api.conceptnet.io/c/en/${searchTerm}?limit=10`);
    const data = await response.json();
    setResults(data.edges);
  };

  useEffect(() => {
    if (searchTerm !== '') {
    handleSearch();
    }
  }, [searchTerm]);

  return (
    <div>
      <h1>ConceptNet Example</h1>
      <input
        type="text"
        placeholder="Enter a word or phrase"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <button onClick={handleSearch}>Search</button>
      <ul>
        {results.map((edge, index) => (
          <li key={index}>
            {edge.start.label} -{">"} {edge.end.label}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default DataDisplay;

 

해당코드를 app.js에서 불러들여 실행해보세요.

위 화면처럼 나오면 성공입니다. 해당 api는 단어들의 상관 관계들을 나열하는 api입니다.

 

코드를 한번 살펴볼까요?

 

일단 전시간에 배운 useState를 봅시다.

 

두가지의 data를 관리하네요 

 

검색하는 searchTerm 

 

검색에 따른 api data  =>  results

 

search 버튼을 누르거나 input box에 단어를 타이핑하면 handleSearch 함수를 실행하여 api data를 불러오고

 

아래 map 함수를 사용해 list를 작성하는 구조입니다. 

 

중간에 우리가 배울 useEffect가 있네요?

 

과연 이것은 왜 사용한것일까요?

 

useEffect란 리액트에서 제공하는 sideEffect라고 생각하시면 됩니다. 

 

부가작용이라는 의미인데요. 

 

일단 여기 실습에서 사용된 이유를 먼저 살펴보자면 

searchTerm이라는 state가 변경될때만 useEffect안에 handleSearch 함수를 실행 시키겠다는 의미입니다.

 

이게 왜 필요할까요? 

 

바로 그 이유는 리액트는 컴포넌트를 렌더링하면 모든 컴포넌트가 렌더링 되기 때문입니다. 굳이 다른 컴포넌트를 사용하는데 

 

api가 불려질 필요는 없죠 때문에 이렇게 useEffect를 사용하여 관리하는 것입니다.