230616 - React(router-youtube)

백승연·2023년 6월 16일

React router

국비지원 프론트엔드 과정

목록 보기

89/97

🚩 React

router을 이용하여 youtube 사이트 구현하기

📝 설명

react router를 사용하여 유튜브 사이트 구현

✒️ 코드 작성

입력

App.js

import './App.css';
import { Outlet } from "react-router-dom";
import SearchHeader from './components/SearchHeader';

function App() {
  return (
    <>
      <SearchHeader />
      <Outlet />
    </>
  );
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "./index.css";
import App from "./App";
import NotFound from "./pages/NotFound";
import Videos from "./pages/Videos";
import VideoDetail from "./pages/VideoDetail";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <NotFound />,
    children: [
      { index: true, element: <Videos /> }, // 처음 설정
      { path: "/videos", element: <Videos /> },
      { path: "/videos/watch/:videoId", element: <VideoDetail /> },
      { path: "/videos/:keyword", element: <Videos /> },
    ],
  },
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    {/* element에 이미 App이 있음 */}
    <RouterProvider router={router} />
  </React.StrictMode>
);

pages 폴더
Videos.jsx

import React from "react";
import { useParams } from "react-router-dom";

export default function Videos() {
  // const aa = useParams();
  // const bb = aa.keyword
  const { keyword } = useParams();

  console.log("aa? : ", keyword);

  return (
    <div>Videos - {keyword ? `🔍 ${keyword}` : "🔥 인기급상승"}</div>
    // 현재 주소 마지막에 키워드가 있을 때 / 없을 때 구분
  );
}

VideoDetail.jsx

import React from 'react'

export default function VideoDetail() {
  return (
    <div>VideoDetail</div>
  )
}

NotFound.jsx

import React from "react";

export default function NotFound() {
  return (
    <div>
      <h3>없는 페이지입니다.</h3>
    </div>
  );
}

components 폴더
SearchHeader.jsx

import React, { useEffect, useState } from "react";
import { BsYoutube, BsSearch } from "react-icons/bs";
import { Link, useNavigate, useParams } from "react-router-dom";

export default function SearchHeader() {
  const navigate = useNavigate();
  const { keyword } = useParams(); // 주소창에 키워드가 있는지 없는지 useEffect에서 감지하게
  const [text, setText] = useState(""); // 문자열을 가져옴 (input에 입력된 입력값을 알아오게)

  const handleSubmit = (e) => {
    e.preventDefault();
    navigate(`/videos/${text}`);
    // setText("");
  };

  // 키워드가 변경될 때마다 input 값 업데이트
  useEffect(() => {
    setText(keyword || "");
  }, [keyword]);

  return (
    <header className="flex ">
      <Link to="/">
        {/* a태그와 동일한 역할을 함 */}
        <BsYoutube />
        <h1>Youtube</h1>
      </Link>

      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="검색"
          value={text}
          onChange={(e) => setText(e.target.value)} // 해당 값이 setText 안으로 들어감
        />
        <button>
          <BsSearch />
        </button>
      </form>
    </header>
  );
}