[Day52] React Router

🔸 Lint

Lint는 코드 스타일과 문법 오류를 검사하고 일관된 코드를 유지하게 도와주는 도구

lint 실행 : 현재 디렉토리(.)부터 모든 파일을 ESLint로 검사

npm run lint

• 코드 스타일 검사 및 자동 수정
• 협업할 때 코드 퀄리티 유지에 도움됨

---

🔸 React Router

• React에서 페이지 전환을 처리하는 표준 라이브러리
• SPA(Single Page Application)에서 URL에 따라 화면을 바꾸는 역할!

라우팅

• URL에 따라 다른 콘텐츠를 사용자에게 보여주는 기능
• 예전 방식: URL 요청 시 서버에서 새 HTML 파일 전달
  • example.com/home → 서버의 home.html 파일 요청
  • example.com/about → 서버의 about.html 파일 요청
• SPA: 자바스크립트가 페이지 전환 없이 화면만 교체 (빠름!)

클라이언트 사이드 라우팅

React 같은 SPA에서 라우팅은 브라우저가 새 페이지를 요청하지 않고, 자바스크립트가 URL과 화면을 제어하는 방식

동작 원리

1. 초기 로딩 시: 필요한 모든 JS 파일을 한 번에 다운로드
2. URL이 바뀔 때:
   • 서버에 새로운 HTML을 요청 ❌
   • 브라우저의 History API (pushState, replaceState)를 사용해 URL만 바꿈
   • React Router가 URL에 따라 컴포넌트를 교체함
3. 결과적으로 화면 깜빡임 없이 빠른 전환이 가능!

설치

npm i react-router-dom

구현 방식

1️⃣ createBrowserRouter + <RouterProvider>

// router에 관련된거를 한곳에 모아두는게 좋음
import { createBrowserRouter, RouterProvider } from "react-router-dom";

// routes/index.jsx
const router = createBrowserRouter([
  {
    element: <Default />,
    children: [
      {
        path: "/",
        element: <MainPage />,  // 부모
        children: [{ path: "", element: <MainSub1Page /> }], // 자식 페이지 목록
      },
      { path: "/about", element: <AboutPage /> },
    ],
  },
  { path: "*", element: <NotFound /> },
]);

export default function Router() {
  return <RouterProvider router={router} />;
}

✅ 특징:

• React Router v6.4 이상부터 지원하는 새로운 방식
• JS 객체로 라우터 구성 → 유지보수 쉬움
• 데이터 로딩, 에러 처리 등 기능 확장에 유리
• 좀 더 구조적이고 대규모 프로젝트에 적합
  

  createBrowserRouter ➔ RouterProvider로 연결

2️⃣ <BrowserRouter> + <Routes>

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
</BrowserRouter>

✅ 특징:

• 옛날부터 쓰던 전통적인 방식
• JSX 안에서 직접 <Route>로 작성
• 간단한 프로젝트에 적합
  

<BrowserRouter> ➔ <Routes> ➔ <Route>로 트리 구조

---

Link 컴포넌트

<Link> 컴포넌트는 페이지 전체를 새로고침하지 않고 클라이언트에서 화면 전환

import { Link } from 'react-router-dom'

<Link to="/about">About</Link>

NavLink 컴포넌트

• <NavLink> 컴포넌트는 현재 경로와 일치할 때 자동으로 active 클래스를 추가
  • active가 붙어서 시각적으로 표현하기 편함

<NavLink
  to="/"
  className={({ isActive }) => (isActive ? styles.active : '')}>
  Home
</NavLink>

---

<Outlet /> : 자식 라우트 표시 자리

• children이 들어갈 위치라는것을 설정
  • 자식 라우트를 렌더링하는 자리
• 부모 컴포넌트 안에 <Outlet />을 넣으면, 현재 매칭된 자식 경로의 컴포넌트가 표시됨

import React from "react";
import { Outlet } from "react-router-dom";
import Footer from "../../components/Footer";
import Header from "../../components/Header";

const Default = () => {
  return (
    <>
      <Header />
      <Outlet /> {/* 여기에 자식 컴포넌트 렌더됨 */}
      <Footer />
    </>
  );
};

export default Default;

---

실무에서 많이 쓰는 폴더 구조

src/
└── pages/
    └── AboutPage/
        ├── AboutPage.jsx
        ├── AboutPage.module.css
        ├── useAboutData.js
        ├── AboutService.js
        └── components/
            └── AboutCard.jsx

• 각 페이지별로 폴더 관리 → 기능 확장, 유지보수 편함
• 스타일, API, 컴포넌트까지 한 폴더에 모음

---

🔸 swiper

스타일에 구조적 접근

슬라이더 내부 구조가 외부 라이브러리에 의해 제어되는 경우, 직접 클래스를 줄 수 없으므로 구조적으로 접근해 스타일을 커스터마이징함.

.slider > div > div {
  background-color: #9f9f9f;
}

💡 Swiper는 내부 구조가 .swiper > .swiper-wrapper > .swiper-slide처럼 구성됨

onSwiper + useRef로 Swiper 직접 조작하는 방법

💡 언제 쓰나?

• Swiper의 기본 내비게이션 버튼이 아닌, 내가 만든 커스텀 버튼으로 슬라이드를 넘기고 싶을 때
• 또는 슬라이드를 프로그래밍적으로 제어하고 싶을 때

🧠 흐름 요약

단계	설명
1. useRef()	Swiper 인스턴스를 담아둘 빈 변수(그릇) 생성 (null로 시작)
2. onSwiper	Swiper가 처음 만들어질 때, 인스턴스를 ref.current에 저장
3. 버튼 클릭	ref.current.slidePrev() 또는 .slideNext() 호출해서 슬라이드 제어

import { useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

export default function CustomSwiper() {
  const swiperRef = useRef(null); // Swiper 인스턴스 담을 ref 생성

  return (
    <div>
      <Swiper
        // Swiper가 준비되면 그 인스턴스를 swiperRef.current 에 담기
        onSwiper={(swiper) => (swiperRef.current = swiper)} 
        slidesPerView={1}
        spaceBetween={10}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
      </Swiper>

      {/* 커스텀 버튼 클릭 시, 해당 메서드를 직접 호출해서 슬라이드를 제어 */}
      <button onClick={() => swiperRef.current.slidePrev()}>Prev</button>
      <button onClick={() => swiperRef.current.slideNext()}>Next</button>
    </div>
  );
}

🛠 Swiper 인스턴스에서 쓸 수 있는 대표 메서드

메서드	설명
slideNext()	다음 슬라이드로 이동
slidePrev()	이전 슬라이드로 이동
slideTo(index)	특정 인덱스로 이동
autoplay.start()	자동 재생 시작
autoplay.stop()	자동 재생 정지

---

🔸 useRef

• 리렌더링 없이 값을 저장할 수 있는 React의 비밀 상자
• 값이 바뀌어도 화면이 안 바뀜 (→ useState와 다름)
• ref.current로 값 읽고, 쓸 수 있음

대표적인 사용 사례

상황	예시
DOM 직접 제어	버튼 클릭 시 input에 focus 주기 등
타이머 / interval ID 저장	setTimeout, setInterval 관리
Swiper 같은 외부 라이브러리 인스턴스 저장	swiperRef.current.slideNext()
리렌더링 없이 값 유지	이전 props 기억, 카운터 추적 등

핵심 특징

✅ 1. 리렌더링 발생 안 함

• ref.current = 값으로 바꿔도 화면엔 영향 없음

✅ 2. 렌더링 간 값이 유지됨

• 일반 변수는 컴포넌트가 다시 실행되면 초기화되지만
  ref는 컴포넌트가 살아있는 동안 값이 유지됨

✅ 3. DOM 직접 접근 가능

const inputRef = useRef();
<input ref={inputRef} />;
inputRef.current.focus(); // DOM 직접 제어

❗주의할 점

1. 렌더링 중에는 ref.current를 읽거나 쓰지 마세요
   • 렌더링 중 ref.current 변경은 React 순수 함수 원칙을 깸
   • 이벤트 핸들러나 useEffect 안에서 사용해야 안전
2. UI에 보여줄 값엔 useState를 쓰세요
   • ref는 화면에 반영되지 않기 때문!
3. 초기화가 무거운 값은 조건부 초기화

   if (ref.current === null) {
     ref.current = new VideoPlayer();
   }
   

---

useState vs useRef

항목	useState	useRef
값이 바뀌면 리렌더링?	⭕️	❌
화면에 표시되는 값?	⭕️	❌
DOM 접근 가능?	❌	⭕️
렌더링과 상관없는 값 저장	❌	⭕️

---

END