useSelectedLayoutSegment, classnames 라이브러리

useSelectedLayoutSegment

• useSelectedLayoutSegment는 ActiveLink를 만들 때 유용한 hooks이다.
• next에 내장되어 있는 기능이다.

-useSelectedLayoutSegment

import {useSelectedLayoutSegment} from "next/navigation";

export default function NavMenu() {
  const segment = useSelectedLayoutSegment();
  console.log(segment);
  
  return <div></div>;
  }

• 만약 "compose/tweet" 주소에 있으면, segment는 "compose"가 나온다.
• 즉, useSelectedLayoutSegment는 최상위 부모 경로만 나온다.

-useSelectedLayoutSegments

import {useSelectedLayoutSegments} from "next/navigation";

export default function NavMenu() {
  const segment = useSelectedLayoutSegments();
  console.log(segment);
  
  return <div></div>;
  }

• 만약 "compose/tweet" 주소에 있으면, segment는 ["compose", "tweet"]가 나온다.
• 즉, useSelectedLayoutSegments는 부모와 자식 경로까지 나온다.

---

classnames

https://www.npmjs.com/package/classnames

classnames

• classnames는 클래스를 합성할 수 있다.

-예시

"use client"
import style from './post.module.css';
import cx from 'classnames';

export default function ActionButtons() {
  const commented = true;
  const reposted = true;
  const liked = false;

  return (
    <div className={style.actionButtons}>
      <div className={cx(style.commentButton, { [style.commented]: commented })}>
      </div>
      <div className={cx(style.repostButton, reposted && style.reposted)}>
      </div>
      <div className={cx([style.heartButton, liked && style.liked])}>
      </div>
    </div>
  )
}

• className에서 클래스들을 합성해서 조건에 맞게 스타일 적용을 할 수 있다.
• && 연산자, 객체, 배열 등으로 적용할 수 있으니 공식문서를 보면 좋다.

-출처

https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4/dashboard

Next + React Query로 SNS 서비스 만들기 강의 - 인프런