[React] React Ajax 활용

 프로젝트를 진행할 폴더 생성 (예, ajax_prac)

$ npx create-react-app '프로젝트명'

 

 

App.js 에 아래 예시 처럼 코드를 작성했습니다. 

먼저 하드 코딩 후, react의 함수형 컴포넌트로 변경하겠습니다.

import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>Hello React</h1>
      <nav>
        <ul>
          <li>
            <a href="">example 1</a>
          </li>
          <li>
            <a href="">example 2</a>
          </li>
          <li>
            <a href="">example 3</a>
          </li>
        </ul>
      </nav>
      <article>
        <h2>title</h2>
        <p>desc</p>
      </article>
    </div>
  );
}

export default App;

제목과 nav메뉴, 메뉴 선택시 변경되는 하위 아티클의 제목과 내용의 구조입니다.

 

---

함수형 컴포넌트로 변경

https://jsonplaceholder.typicode.com/users → 해당  json  데이터를 이용하여 리스트에 출력하겠습니다.

컴포넌트  <Nav>  생성

import { useState, useEffect } from "react";
import "./App.css";

function Nav({ list, onclick }) {
  // list에 따라 반복된 결과를 변수 listHTML에 담음
  let listHTML = list.map((item) => {
    return (
      <li key={item.id}>
        <a
          href={item.id}
          data-id={item.id}
          onClick={(e) => {
            e.preventDefault();
            onclick(e.target.dataset.id);
          }}
        >
          {item.name}
        </a>
      </li>
    );
  });
  return (
    <nav>
      <ul>{listHTML}</ul>
    </nav>
  );
}

function Article({ title, desc }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{desc}</p>
    </article>
  );
}

function App() {
  const [article, setArticle] = useState({
    title: "welcome",
    desc: "Hello, React & Ajax",
  });
  const [list, setList] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => {
        setList(data);
      });
  }, []);

  return (
    <div className="App">
      <h1>Hello React</h1>
      <Nav
        list={list}
        onclick={(id) => {
          fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
            .then((res) => res.json())
            .then((data) => {
              setArticle({
                title: data.name,
                desc: data.email,
              });
            });
        }}
      />
      <Article title={article.title} desc={article.desc} />
    </div>
  );
}

export default App;