[2025 1학기 React.js 스터디] 최은희 #6주차

희희 안녕하세용 바로 공부 시작하겟습니댜. ^_^ ~~

 

API 연동하기

-일단, api가 무엇이느냐 하면...

다른 서버에게 데이터를 달라고 요청하는 통로입니다. 데이터는 외부의 서버에서 보통 받아 오는데 api가 연결 통로가 되어줍니다.

 

npx create-react-app api-integrate
cd api-integrate
yarn add axios

요로케 터미널에 작성해주세요.

 

(axios는 api요청을 도와주는 js 라이브러리 입니다. 자주 쓰이는 메서드가 있는데

get->조회, post->등록, put->전체 수정, delete->삭제 이니 알아두도록 하겠습니다)

 

useState랑 useEffect로 데이터를 로딩해주겠습니다.

리액트는 useEffect안에 동기함수(순서대로 실행되는 함수)만 넣을 수 있어서 async는 밖에서 쓰고 안에서 async 함수를 하나 더 만들어줘야 합니다.

if (loading) return <div>로딩중..</div>; -> 로딩중 화면을 보여주고요,

if (!users) return null; -> 데이터를 못 받았으면 아무것도 보여주지 않아요

마지막으로 users 배열에 있는 사용자를 map()으로 꺼내서 <li>로 보여줍니다.

이렇게 잘 실행되었습니다 !!

 

에러가 났을 때 재요청하는 기능을 만들어주려고 합니다.

fetchUsers 함수를 바깥으로 꺼내주고, 버튼을 만들어서 해당 함수를 연결해주도록 합시다.

 

React Router v6

01.

SPA(싱글 페이지 애플리케이션)은 html파일을 한 번 받아오고 이후엔 js로 필요한 부분만 바꾸어준다.

예전에는 화면 전체를 고쳤지만 지금은 주소창만 조금 바꾸고 화면은 유지해준다,

 

02.

리액트에는 주소에 따라 페이지를 나누는 기능이 없다 ㅜㅜ

그래서 react-router-dom이라는 라이브러리를 설치해야한다.

yarn add react-router-dom

터미널에 작성해주고, index.js에서 BrowserRouter로 전체 앱을 감싸주자.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

페이지 컴포넌트를 만들자.

//Home.js

const Home = () => {
  return (
    <div>
      <h1>홈</h1>
      <p>여기는 홈페이지입니다.</p>
    </div>
  );
};

export default Home;

//About.js

const About = () => {
  return (
    <div>
      <h1>소개</h1>
      <p>리액트 라우터 배우는 중이에요.</p>
    </div>
  );
};

export default About;

App.js에서 주소마다 어떤 컴포넌트를 보여줄지 정하자.

// src/App.js

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

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

export default App;

 

03. url파라미터와 쿼리스트링

url은 경로에 위치가 포함 되고, 쿼리 스트링은 ?뒤에 붙는다는 차이점이 있다. 그리고 &로 구분한다고 한다.

특정 리소스를 식별할 때는 url, 옵션을 전달할 때는 쿼리 스트링을 쓴다.

 

03-1. url 파라미터

usePatams 훅은 리엑트 라우터에서 url 파라미터를 가져올 때 쓰는 훅이다.

:username url 파라미터 이름이고

date[username] 해당 유저 정보 찾기

 

03-2. 쿼리스트링

Route 컴포넌트를 사용할 떄 별도로 설정할 것은 X

location.search 값을 통해 조회가능.

useSerchParams 는 쿼리스트링을 쉽게 다루게 도와주는 hook

주의해야하는 점은 1. 값은 무조건 문자열이여야 함 (숫자나 불리언은 변환 해주기) 2. 없는 값 조회시 null반환하기

 

04. 중첩된 라우트

중첩 라우트는 페이지 안에 또 다른 페이지를 포함시키는 구조인데,

Outlet 컴포넌트를 사용하여 작성할 수 있다.

 

04-1. 공통 레이아웃 컴포넌트

// Layout.jsx
import { Outlet } from 'react-router-dom';
import Header from './Header';

function Layout() {
  return (
    <div>
      <Header />
      <main>
        <Outlet />
      </main>
    </div>
  );
}

export default Layout;

header는 공통으로 항상 보여줄 컴폰넌트이고,

outlet은 현재 라우트에 해당하는 자식 페이지 컴포넌트가 들어올 자리이다.

-> /about, /profile 같은 주소에 접속해도 화면에는 항상 header가 있고 밑에 페이지가 교체되는 구조.

 

04-2. index props

index를 사용하면 의도를 명확히 표현할 수 있다.

 

05. 라우터 부가기능

 

05-1. useNavigate

Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 하는 상황에 사용하는 Hook. 

navigate(-n) 을 쓰면 n만큼 뒤로 간다. 뒤로가기를 한 상태라면 navigate(n)으로 n만큼 앞으로 갈 수도 있다,

replace라는 옵션을 사용하면 기록을 남기지 않을 수 있다.

 

05-2. NavLink

링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 CSS 클래스를 적용하는 컴포넌트.

ps. NavLink가 반복되면 코드가 지저분해질 수 있음. ArticleItem 컴포넌트로 분리하면,
가독성도 좋아지고 재사용성도 높아져서 유지보수에 유리 

 

05-3. Notfound페이지 만들기

페이지를 찾을 수 없을 때 나타나는 페이지.

*는 wildcard문자. 아무 텍스트나 매칭해준다.

 

05-4. Navigate 컴포넌트

다른페이지로 이동하고 싶을 때 사용하는 컴포넌트. (리다이엑트 하고 싶을 때)

import { Navigate } from 'react-router-dom';

const MyPage = () => {
  const isLoggedIn = false;

  if (!isLoggedIn) {
    return <Navigate to="/login" replace={true} />;
  }

  return <div>마이 페이지</div>;
};

사용자가 /mypage 주소로 이동 -> MyPage 컴포넌트가 렌더링되는데, isLoggedIn === false -> <Navigate to="/login" replace />가 실행-> 즉시 /login 경로로 이동하고, 뒤로 가기를 눌러도 /mypage로 다시 돌아가지X