230629.til

polaris6204·2023년 6월 29일
0

키워드 정리

color-scheme

웹 페이지가 지원하는 색상 테마를 시스템에 알려주는 역할을 한다.
보통 이 속성은 웹 페이지의 루트 요소(html) 에 적용되고,
light, dark, normal 의 값을 가진다.
@media (prefers-color-scheme: dark) 같은 미디어 쿼리와 함께 사용하면
다크테마, 라이트테마 같은 시스템 테마 컬러 설정을 하는 것에 유용하다.

React.FC<> ?

React Function Components 를 명시해주는 타입스크립트 구문이다.
컴포넌트의 props 타입을 명시해 주기 위해 종종 사용한다.
최근에는 아래와 같은 단점들로 인해 잘 사용하지 않는다고 한다.

  1. 자동으로 children props 을 추가한다.
    React.FC 타입을 사용하면 명시해주지 않아도 자동으로 children 이라는
    오리지널 prop이 추가된다. 따라서 children prop 을 원하든, 원하지 않든
    반드시 전달받게 되어 전달받지 않아야만 하는 컴포넌트에 children prop 을
    전달하는 것을 타입스크립트 차원에서 방지할 수 없다.

  2. 명시적 null 반환이 가능해진다.
    React.Fc 는 ReactElement | null 타입으로 정의 되므로,
    컴포넌트의 리턴값이 null 이 될 수 있다는 뜻이 된다.
    그러나 리액트 컴포넌트가 null 을 반환하는 것은 권장되지 않는다.
    예를들어, 특정 조건을 만족하지 못하면 렌더링 되지 않아야 하는 컴포넌트의 경우
    null 을 반환하는 것 보다 Fragments Elements(<></>) 를 반환하는 것이
    더 권장되는 패턴이다.

  3. defaultProps 와의 호환성 문제.
    React 컴포넌트가 기본적으로 사용할 props 의 기본값을 설정할 수 있는
    defaultProps 가 React.FC 에서는 제대로 호환되지 않는다.

twMerge (tailwind css rib)

tailwind css 를 이용하여 스타일링을 할 때,
예를들어,

export default function Box({ children, className }: Props) {
  return (
    <div className={`w-full rounded-lg bg-neutral-900 h-fit ${className}`}>
      {children}
    </div>
  );
}

이런식의 박스 컴포넌트를 작성하여 활용하려고 하면
상위 컴포넌트에서 사용할 때 동일한 CSS 속성에 대한 다른 값을 적용할 수 없다.
평소엔 크게 문제가 없지만 Box 컴포넌트를 재사용하려면 조금 까다로운 문제가 될 수 있다.
그럴 때 tailwind-merge 라이브러리의 twMerge 함수를 사용하면 해결할 수 있다.
위의 예시를

return (
    <div
      className={twMerge("w-full rounded-lg bg-neutral-900 h-fit", className)}
    >
      {children}
    </div>
  );

이런식으로 바꾸면

	<Box>Sidebar Navigation</Box>
	<Box className="h-full overflow-y-auto">Song Library</Box>

사용하지 않는 경우 "h-fit" 클래스는 항상 className에 의해 덮어씌워지지 않는다.
결과적으로, div의 height는 fit-content가 되기 때문에 재사용하기 까다롭다.

twMerge를 사용하는 경우 className에 "h-full"이 포함되어 있으면
"h-fit" 클래스를 덮어쓰게 된다. 결과적으로 div의 height는 100%가 된다.

위와 같은 각각의 컴포넌트에서 공통의 CSS 속성을 사용하되,
필요한 속성을 덮어씌우는 식으로 사용할 수 있다.

tailwind : truncate

truncate 옵션은 아래의 옵션을 묶어서 정의한 tailwind 클래스 이다.

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

글자가 억지로 줄바꿈 되거나 하는 현상을 막아주는 옵션들.
기억해두면 굉장히 유용하게 사용할 수 있을 것 같다.

profile
Always, we are friend 🧡

0개의 댓글