TIL_230508 - TailwindCSS - parent group / Next.js13 - usePathname

📒 오늘의 공부

1. TailwindCSS

부모 요소에 hover 했을 때 자식 요소 속성 변경하기

• 부모 요소에 parent group
• 자식 요소에 child group-원하는 스타일 속성

  <div className="parent group">  
  <div className="child group-hover:bg-themePink child group-hover:text-white duration-300"></div>
  </div>

2. Next.js 13

usePathname

• 현재 page에 따라 Header의 nav bar text 색상 변경하기

usePathname

• page컴포넌트가 아닌 컴포넌트에서 page의 경로 불러오기
  • useRouter hook은 page 컴포넌트에서만 사용 가능
  • Header 컴포넌트의 경우 app의 root layout의 하위 컴포넌트라서 useRouter hook 사용 불가

• usePathname은 client Component에서만 사용가능하기 때문에 "use client"를 상위에 추가

  <div className=
    {`${pathname === '/films' ? 'text-red-400' : 'text-gray-400'}`}
  >
  FILMS
  </div>

• 템플릿 리터럴(Template Literal)을 사용해 해당 페이지일 때 nav text 색상 변경

참고 자료

Next.js 공식문서