먼저 피드백부터 수정 후 검색 API 연동 미션을 진행한다.

• 피드백 수정

<aside> 💡

Mission

1. 헤더 공통 레이아웃으로 이동

• src/components/Layout/Layout.jsx

  <aside> 📌

  Hint

  <Outlet/> 을 사용해서 전체 페이지에서 Layout 컴포넌트를 만들고 Header를 그 안에 사용할 수 있도록 옮겨주세요

  </aside>

  <aside> 📌

  Hint

  레이아웃 공식 설명 문서

  children 공식 설명 문서

  구글 검색 결과

  </aside>

2. 검색 페이지 컴포넌트 추가

• src/pages/Search/SearchPage.jsx

3. 검색 페이지 route 추가

// router.jsx
path: '/search',
element: <Search />

4. Header에서 검색시 아래 주소로 이동 시키기

<aside> 📌

Hint

useNavigate 공식 문서

</aside>

/search?query='검색어'

5. Search API 연동

<aside> 📌

GET /search/photos?query=’검색어’

</aside>

<aside> 📌

Hint

axios에서 getPhotos 함수를 만들어 useQuery에 함수를 넣어주세요

구글 검색 결과

</aside>

https://unsplash.com/documentation#search

6. 데이터 임시 UI로 노출

<aside> 📌

data map으로 img 태그에 src로 urls.regular를 노출해주세요

</aside>

7. 코드리뷰에서 useQuery 사용법에 대한 질문 예정

</aside>

헤더 공통 레이아웃으로 이동하기

React Router를 사용하여 헤더를 공통 레이아웃으로 이동하는 방법은 다음과 같습니다:

1. Layout 컴포넌트 생성

src/components/Layout/Layout.jsx 파일을 생성하고 다음과 같이 작성합니다:

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

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

export default Layout;

2. 라우터 설정 수정

router.jsx 파일을 다음과 같이 수정합니다:

import { createBrowserRouter } from "react-router-dom";
import Layout from "./components/Layout/Layout";
import Search from "./pages/Search/SearchPage";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/search",
        element: <Search />,
      },
    ],
  },
]);

이렇게 설정하면 모든 페이지에서 Header 컴포넌트가 공통으로 표시되며, 각 페이지의 내용은 Outlet을 통해 렌더링됩니다.

<aside> React Router의 공식 문서에서 다음 내용을 참고하세요:

• Outlet 컴포넌트
• createBrowserRouter </aside>

Header에서 검색 시 주소 이동 구현 설명

위 코드에서 검색 기능을 구현한 부분을 설명하겠습니다:

1. useNavigate 훅 사용

React Router의 useNavigate 훅을 사용하여 프로그래밍 방식으로 페이지 이동을 구현했습니다:

const navigate = useNavigate();