[2024 여름방학 React.js 스터디] #6주차 이가인

API 연동의 기본 

1. axios 라이브러리 설치

$ cd api-integrate
$ yarn add axios

 

 

 

REST API 메서드 의미

• GET: 데이터 조회  -> axios.get( api주소 )
• POST: 데이터 등록

  • axios.post('/users', {
      username: 'blabla',
      name: 'blabla'
    });

• PUT: 데이터 수정
• DELETE: 데이터 제거
• PATCH: 리소스 일부 수정
• HEAD: GET과 비슷하지만, 응답 본문(body)은 포함하지 않고, 헤더 정보만을 반환

 

 

useState 와 useEffect 로 데이터 로딩

 

useState : 요청상태 관리

useEffect : 렌더링 시점에 요청 시작

1. 요청의 결과

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

function Users() {
  const [users, setUsers] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        // 요청이 시작 할 때에는 error 와 users 를 초기화하고
        setError(null);
        setUsers(null);
        // loading 상태를 true 로 바꿉니다.
        setLoading(true);
        const response = await axios.get(
          'https://jsonplaceholder.typicode.com/users'
        ); //https://jsonplaceholder.typicode.com/users URL에 GET 요청을 보내고, 서버에서 반환된 데이터를 response 변수에 저장
        setUsers(response.data); // 데이터는 response.data 안에 들어있습니다.
        //요청이 완료될 때까지 다음 코드가 실행되지 않습니다.
      } catch (e) {
        setError(e);
      }
      setLoading(false);
    };

    fetchUsers();
  }, []);

  if (loading) return <div>로딩중..</div>;
  if (error) return <div>에러가 발생했습니다</div>;
  if (!users) return null;
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.username} ({user.name})
        </li>
      ))}
    </ul>
  );
}

export default Users;

# async 

- 비동기작업 처리하는 함수에서 async로 선언된 함수는 항상 Promise를 반환하며, 내부에서 await 키워드를 사용해 비동기 작업의 결과를 기다릴 수 있음

- 비동기 작업을 효율적으로 처리할 수 있게 해줌

 

#<u1>

- unordered list : 순서가 없는 목록

- 전체 컨테이너 역할 

 

#<li> 

- 목록의 각 항목을 나타냄

- u1 또는 o1 태그 안에서 사용

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ul>

 

2. 로딩 상태

3. 에러 발생 확인

const response = await axios.get(
  'https://jsonplaceholder.typicode.com/users/showmeerror'
);

 

 

버튼눌러서 api 재요청

fetchUsers 함수를 바깥으로 꺼내고 버튼을 만들어 함수 연결

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

<button onClick={fetchUsers}>다시 불러오기</button>

 

 

2. 웹과 라우팅

라우팅 : 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미

  -  여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요

  -  리액트 라우터 ; 가장 오래됐고, 가장 많이 사용됨, 컴포넌트 기반

  -  Next.js ; 리액트 라우터의 대안, 파일 경로 기반

 

 

싱글 페이지 애플리케이션

- 한 개의 HTML 페이지로 구성된 애플리케이션

- 과거에는 페이지를 이동할 때마다 새로운 html과 리소스를 서버에서 받아와야했지만 spa는 처음에 한 번만 html을 받아오고, 이후엔 필요한 데이터만 서버에서 받아와 화면을 동적으로 업데이트함

- 서버 자원 절약, 사용자 경험 향상시킴

- 사용자는 여러 페이지가 있는 것 처럼 느끼지만 실제로는 브라우저의 주소만 바뀌고 페이지는 동적으로 업데이트됨

 

 

리액트 라우터 적용 및 기본 사용법

 

라우터를 적용하고 디렉터리(src)에 pages 경로를 만들고 Home 과 About 의 파일들을 생성한다. 

이 후 Route라는 컴포넌트로 특정 경로에 원하는 컴포넌트 보여줘야한다. 

또한 Route의 컴포넌트는 Routes 컴포넌트 내부에서 사용되어야 한다. 

<Route path="주소규칙" element={보여 줄 컴포넌트 JSX} />

 

라우트설정

src/App.js

import { Route, Routes } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
};

export default App;

 

이런식으로 보여주면 됨

 

URL 파라미터와 쿼리스트링

페이지 주소가 유동적인 값을 사용해야 할 때

• URL 파라미터 예시: /profile/velopert   

            - ID 또는 이름을 사용하여 특정 데이터를 조회할 때 사용

• 쿼리스트링 예시: /articles?**page=1&keyword=react

            -  키워드 검색, 페이지네이션, 정렬 방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용

import { Route, Routes } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
import Profile from './pages/Profile';

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/profiles/:username" element={<Profile />} />
    </Routes>
  );
};

export default App;