[React] 리액트에서 컴포넌트를 효율적으로 사용하자.

공통되는 컴포넌트를 어떻게 하면 작성을 줄일 수 있을까?

그동안 여러 화면에서 공통으로 랜더링 해야 하는 컴포넌트가 존재한다면 해당 컴포넌트를 랜더링해야 하는 컴포넌트에 한번 더 작성하는 형식으로 처리하였다.

그러나, 이렇게 작성하게 되면 아래와 같은 문제점이 존재한다.

상위 컴포넌트 랜더링 시 여러 번 작성한 컴포넌트까지 또다시 랜더링을 해야 한다.

그렇기 때문에, 겹치는 컴포넌트 (공통으로 사용되는 컴포넌트)가 존재할 때에는 여러 레이아웃에 겹쳐 한번만 사용할 수 있도록 해야 한다.
이번에 Route를 이용하여 페이지를 랜더링시키는 클론코딩을 진행하면서 새롭게 알게 된 내용을 정리하려 한다.

아래 코드는 나의 App.js 파일 구조를 나타낸다.

import { Outlet, Routes, Route } from "react-router-dom";
const Layout = () => {
  return (
    <div>
      <Nav />

      <Outlet />

      <Footer />
    </div>
  );
};

function App() {
  return (
    <div className="app">
      <Routes> 
        <Route path="/" element={<Layout />} >
          <Route index element={<MainPage />} />
          <Route path=":movieId" element={<DetailPage />} />
          <Route path="search" element={<SearchPage />} />
        </Route>
      </Routes>
    </div>
  );
}

Nav와 Footer 를 공통적으로 사용하기 때문에 해당 컴포넌트를 Layout 컴포넌트라고 다시 정리해두고 Outlet을 사용하여 겹치는 부분들을 재사용할 수 있게 한다.

Outlet의 기능

Outlet 부분에 Laytout 하위에 매칭시켜놓은 라우터 구조에 공통적으로 들어가게 되어, 최상단에는 Nav, 하단에는 Footer가 들어가게 된다.

index는 무슨 역할일까

<Route path="/" element={<Layout />} >
          <Route index element={<MainPage />} />
            ...

이렇게 쓰인 index는 Layout 페이지를 바탕으로 기본으로 랜더링되는 것을 의미한다. 그럼 "/" 경로에 들어갔을 때, 기본적으로 메인페이지가 랜더링 될 것이다.