[한 입 크기로 잘라 먹는 리액트] 리액트(React) 04

hidihyeonee·2025년 2월 5일

JavaScript React vscode 신한DS 금융SW 아카데미 4기 웹

2025.02.05 작성

OS : Window
개발환경 : VScode
개발언어 : JavaScript
프레임워크 : React

라우터

router
route: 경로
라우팅: 클라이언트에서 서버로 요청 했을 때(URL)로 해당 위치(자원)을 찾는 과정
SPA: 브라우저에서만 라우팅이 일어남
CSR: Client Side Rendering (!= SSR)

npm install react-router-dom

useLocation, useSearchParams

import { useLocation, useSearchParams } from "react-router-dom";

const Profile2 = () => {
    const params = useLocation();
    console.log(params);

    // 자바스크립트 내장함수 사용
    const param = new URLSearchParams(params.search);
    console.log("a: ", param.get("a"));
    console.log("b: ", param.get("b"));

    // 리액트훅 사용
    const [parameter, setParameter] = useSearchParams();
    console.log("a: ", parameter.get("a"));
    console.log("b: ", parameter.get("b"));

    return (
        <>
            <div>
                프로필
            </div>
            <div>쿼리스트링 : {params.search}</div>
        </>
    );
};

export default Profile2;

useLocation

const params = useLocation();
console.log(params);

useLocation 훅은 현재 위치에 대한 정보를 제공.
이 정보에는 경로, 검색 문자열(쿼리 문자열), 해시 등이 포함.

useSearchParams

const [parameter, setParameter] = useSearchParams();
console.log("a: ", parameter.get("a"));
console.log("b: ", parameter.get("b"));

useSearchParams()는 배열을 반환하며, 첫 번째 값은 현재의 쿼리 문자열을 URLSearchParams 객체 형태로 제공.
parameter.get("a"): parameter에서 a 값을 얻음.

차이점

useLocation을 통해 현재 페이지의 URL 정보를 얻을 수 있어, 라우터 기반의 애플리케이션에서 페이지의 상태를 관리하거나 렌더링할 때 유용.
useSearchParams을 사용하면 쿼리 파라미터를 관리하는 상태를 쉽게 조작할 수 있음. 예를 들어, 쿼리 파라미터 값을 변경할 수 있는 기능을 추가할 때 유용.

Outlet (= 메뉴, 헤더에 사용하기 적합)

Outlet은 React Router에서 부모 라우트 컴포넌트가 자식 라우트를 렌더링할 수 있도록 하는 컴포넌트.

기본적으로 Outlet은 부모 컴포넌트에서 자식 컴포넌트를 렌더링할 수 있는 자리 표시자 역할

function Layout() {
return (
  <div>
    <h1>메인 레이아웃</h1>
    <Outlet />  {/* 자식 라우트가 여기서 렌더링됩니다 */}
  </div>
);
}

NotFound (= 존재하지 않는 페이지)

  function App() {
  return (
    <div className="App">
      <Routes>
        <Route element={<Layout />} >
          <Route path='/' element={<Main />} />
          <Route path='/intro' element={<Intro />} />
          <Route path='/profile/:id' element={<Profile />} />
          <Route path='/profile2' element={<Profile2 />} />
        </Route>

        {/* 맨 밑에 작성, 존재하지 않는 경로 페이지 */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

Axios

Promise 기반의 HTTP 클라이언트로, JavaScript에서 서버와 데이터를 주고받기 위해 주로 사용
이를 통해 HTTP 요청(GET, POST 등)을 보내고, 서버로부터 응답을 받을 수 있음.

Axios의 주요 특징

비동기 요청 처리:

Axios는 Promise를 사용하여 비동기적으로 데이터를 처리. 따라서, 서버로부터 응답을 받은 후의 처리는 .then(), .catch(), 또는 async/await 방식으로 할 수 있음.
브라우저와 Node.js 환경 모두에서 사용 가능:

Axios는 브라우저에서뿐만 아니라 Node.js 환경에서도 HTTP 요청을 보낼 수 있는 라이브러리.
간편한 API:

Axios는 직관적이고 간단한 API를 제공. 특히, JSON 데이터와 함께 작업할 때 유용하며, 서버와의 상호작용을 더 쉽게 만들어줌.
인터셉터(Interceptor):

요청과 응답을 가로채는 기능을 제공하여, 전역적인 에러 처리나 헤더 설정 등을 간단하게 처리할 수 있음.
응답 데이터 자동 변환:

서버에서 받은 응답을 자동으로 JSON 형식으로 변환하여 처리해줌.
HTTP 요청 취소:

요청을 취소하는 기능도 제공하여, 특정 요청을 중단할 수 있음.

주요 기능:

POST, GET, PUT, DELETE 요청을 지원.
요청에 대한 timeout 설정 및 headers 설정.
request/response를 인터셉트하여 전처리 및 후처리 가능.
요청을 취소하거나 동시 요청을 보낼 수 있는 기능 제공.

1. GET 요청

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('응답 데이터:', response.data);
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

2. POST 요청

import axios from 'axios';

const data = {
  name: 'John',
  age: 30
};

axios.post('https://api.example.com/submit', data)
  .then(response => {
    console.log('서버 응답:', response.data);
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

3. async/await 사용 (비동기 처리)

비동기(Asynchronous) 처리는 작업을 기다리지 않고, 동시에 여러 작업을 처리할 수 있는 방식

import axios from 'axios';

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('응답 데이터:', response.data);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

fetchData();