TIL : outlet, nanoid

outlet

: 중첩라우터를 사용하기 위해서는 Outlet 컴포넌트를 사용한다.
outlet 컴포넌트는 하위 router element를 렌더링하기 위해 상위 router element에서 사용해야 하며, 결과적으로 하위 경로가 렌더링될 때 중첩된 UI가 표시되는 것을 확인할 수 있다.

사용하기

// Router.js
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
            <Route path="content/*" element={<Content />} />
                <Route path=":id" element={<ContentDetail />} />
        	</Route> 
        </Routes>
    </BrowserRouter>
  );
};

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

const Web = () => {
  return (
    <div>
      <h1>Title</h1>
      <Outlet />
    </div>
  );
};

위와 같이 작성하면 route 하위에 있는 내용이 outlet에 children처럼 가져와진다.

( 참고 : 리액트라우터 공식문서 , 블로그 )

---

nanoid

: redux toolkit에 있는 nanoid는 암호화되지 않은 보안 임의 ID 문자열을 생성한다.

지금까지는 객체에 id값을 줄 때, 고유값으로 uuid만 사용해 왔었는데, nanoid라는 새로운 방법을 알아서 좋았다. nanoid는 uuid보다 작은 크기로, uuid보다 빠르다는 장점으로 최근에 많이 사용되고 있다고 한다.

사용하기

import { nanoid } from '@reduxjs/toolkit'

console.log(nanoid());

toolkit으로부터 nanoid를 import해와서 uuid처럼 필요한 곳에 쓰면 된다!
( 참고 : 리덕스공식문서 )

---

프로젝트 첫날이었다. 프로젝트 세팅을 하면서 위와 같은 내용들을 새롭게 알게 되었다. 팀프로젝트의 장점은 강의에는 없던 새로운 내용들도 공부할 수 있다는 점이다. 서로 공유하며 알게되는 게 도움이 참 많이 되는 것 같다.