[TIL] 내일배움캠프 React 과정 2024.05.22

오늘의 한 일

• 챌린지반 수업 복습
  • Layout의 불필요한 mount, unmount를 없애는 방법
• 챌린지반 수업
• 개인 지출 관리 어플리케이션 (개인 과제)

복습: Layout의 불필요한 mount, unmount를 없애는 방법

React 버전 5 이전의 Layout을 사용하는 방법

• 반복되는 컴포넌트를 하나의 Layout으로 분리할 때, 각 페이지를 Layout 컴포넌트로 감싼다

• 위 방법은 Layout은 바뀌지 않는데도 mount, unmount가 될 수 있다는 문제점이 있다.

• 예시 코드

  // DefaultLayout.jsx
  function DefaultLayout() {
   return (
     <div>
       {children}
       <Link to="/">홈 페이지</Link>
       <br />
       <Link to="/posts">포스트 목록 페이지</Link>
       <br />
       <Link to="/posts/123">포스트 상세 페이지</Link>
     </div>
   );
  }
  
  export default DefaultLayout;

  //Homepage.jsx
  function Homepage() {
   return (
     <DefaultLatyout>
       <h1>Homepage</h1>
     </DefaultLatyout>
   );
  }
  
  export default Homepage

  //PostListPage.jsx
  function PostListPage() {
   return (
     <DefaultLatyout>
       <h1>PostListPage</h1>
     </DefaultLatyout>
   );
  }
  
  export default PostListPage

React 버전 6의 Layout을 사용하는 방법

• 불필요한 mount, unmount를 해결하기 위한 방법이 라우터에 적용되어 있으므로 라우터에 Layout을 사용한다.

• 주의사항

  • {children} 대신 <Outlet/>을 사용한다.

• 예시 코드

  //DefaultLayout.jsx
  function DefaultLayout() {
   return (
     <div>
       <Outlet />
       <Link to="/">홈 페이지</Link>
       <br />
       <Link to="/posts">포스트 목록 페이지</Link>
       <br />
       <Link to="/posts/123">포스트 상세 페이지</Link>
     </div>
   );
  }

  //router.jsx
  const router = createBrowserRouter([
   {
     element: <DefaultLayout />,
     children: [
       {
         path: "/",
         element: <Homepage />,
       },
       {
         path: "/posts",
         element: <PostsListPage />,
       },
     ],
   },
  ]);
  
  export default router;

  오늘의 회고

  정리하고 싶은 내용은 기록해놨는데 개인 과제인 지출 관리 어플리케이션을 빨리 완성하고 싶어 오늘은 복습한 내용만 적고 넘어간다... (완성하고 다시 정리할 것!) 완성한 사람들이 벌써 몇명씩이나 있다고 하니 경쟁심이 살짝 불타오르는 것 같다. 그래도 확실하게 배운 건 정리하고, 내가 이 기술을 왜 쓰는지 생각하면서, 꼼꼼하게 코드를 작성하자!