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 : 렌더링 시점에 요청 시작
- 요청의 결과
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;
'WINK-(Web & App) > React.js 스터디' 카테고리의 다른 글
[2024-2 React.js 스터디] 김지수 #1주차 (5) | 2024.10.08 |
---|---|
[2024 여름방학 React.js 스터디] 이종윤 #6주차 (0) | 2024.08.19 |
[2024 여름방학 React.js 스터디] 정채은 #6주차 (0) | 2024.08.16 |
[2024 여름방학 React.js 스터디] 김민서 #6주차 (0) | 2024.08.16 |
[2024 여름방학 React.js 스터디] 백채린 #6주차 (0) | 2024.08.16 |