[z.com] Z.com 구현 - useSelectedLayoutSegment, Backdrop Filter, Dayjs, Context API

useSelectedLayoutSegment

왼쪽 섹션을 구현하려고 하는데, 필요한 기능이 있다.

바로 현재 내가 있는 곳이 어딘지를 구하는 것이다.

그것을 도와주는 게 useSelectedLayoutSegment이다.

사용법은 이와 같이 사용하면 된다.

더 알아보기

내가 있는 페이지의 layout의 가장 처음 URL이 나온다.

현재 나는 이 layout에 있기 때문에 /home/1 에 들어가면 useSelectedLayoutSegment는 home이 나온다.

예를들어, home에 있는 layout에서 useSelectedLayoutSegment를 입력했을 경우에는 1이 나온다.

home과 1을 둘다 출력시키고 싶은 경우에는 useSelectedLayoutSegment에 s를 붙인 useSelectedLayoutSegments를 입력하면 된다.

useSelectedLayoutSegments의 결과는 ['home', 1]이 나온다.

결과

segment가 home일 경우 진하게, 아닐 경우 연하게 처리해주었다!

Backdrop Filter

배경을 살짝 반투명하게 하고 싶다면 backdrop-filter를 이용하면 된다!

backdrop-filter : blur(12px)

Dayjs

트위터 클론을 하다보면 4시간, 4분 전, 4초 전과 같이 현재 시간과 비교하는 것이 필요하다.

이때, dayjs 라이브러리를 쓰면 좋은데,

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/ko';

dayjs.locale('ko');
dayjs.extend(relativeTime)

relativeTime : 상대적인 시간을 구현해줌
dayjs/locale/ko : 한국어로 바꿔줌

위처럼 import 해주고

<span className={style.postDate}>{dayjs(target.createdAt).fromNow(true)}</span>

이렇게 쓰면 끝!

Context API

부모 컴포넌트가 하나 있고, 자식 컴포넌트가 두 개 있는데 그 자식들도 같은 props들이 필요할 경우, 계속 props를 사용하여야 한다.

지금은 부모 - 자식만 있어서 상관없지만 자식이 5,6개로 끝없이 뻗어져 나가면 props drilling이 생기며 코드가 매우 지저분해질 것이다.

그때 사용하면 좋은 것이 이 context API이다.

TabProvider.tsx

import {createContext, ReactNode, useState} from "react";

// 초기 값 설정해줌
export const TabContext = createContext({
  tab: 'rec',
  setTab: (value: 'rec' | 'fol') => {},
});

type Props = { children: ReactNode };

export default function TabProvider({ children }: Props) {
  const [tab, setTab] = useState('rec');

  return (
    // 값 넣어줌
    <TabContext.Provider value={{ tab, setTab }}>
      {children}
    </TabContext.Provider>
  )
}

page.tsx

     // provider props를 사용할 컴포넌트들을 감싸줌
        <TabProvider>
          <Tab/>
          <PostForm me={session} />
          <TabDecider />
        </TabProvider>

Tab.tsx

 const { tab, setTab} = useContext(TabContext);

이렇게 하면 props를 각각 정의해주지 않고도 쉽게 tab과 setTab을 얻어올 수 있다!