키워드 정리
color-scheme
웹 페이지가 지원하는 색상 테마를 시스템에 알려주는 역할을 한다.
보통 이 속성은 웹 페이지의 루트 요소(html) 에 적용되고,
light, dark, normal 의 값을 가진다.
@media (prefers-color-scheme: dark) 같은 미디어 쿼리와 함께 사용하면
다크테마, 라이트테마 같은 시스템 테마 컬러 설정을 하는 것에 유용하다.
React.FC<> ?
React Function Components 를 명시해주는 타입스크립트 구문이다.
컴포넌트의 props 타입을 명시해 주기 위해 종종 사용한다.
최근에는 아래와 같은 단점들로 인해 잘 사용하지 않는다고 한다.
-
자동으로 children props 을 추가한다.
React.FC 타입을 사용하면 명시해주지 않아도 자동으로 children 이라는
오리지널 prop이 추가된다. 따라서 children prop 을 원하든, 원하지 않든
반드시 전달받게 되어 전달받지 않아야만 하는 컴포넌트에 children prop 을
전달하는 것을 타입스크립트 차원에서 방지할 수 없다. -
명시적 null 반환이 가능해진다.
React.Fc 는 ReactElement | null 타입으로 정의 되므로,
컴포넌트의 리턴값이 null 이 될 수 있다는 뜻이 된다.
그러나 리액트 컴포넌트가 null 을 반환하는 것은 권장되지 않는다.
예를들어, 특정 조건을 만족하지 못하면 렌더링 되지 않아야 하는 컴포넌트의 경우
null 을 반환하는 것 보다 Fragments Elements(<></>) 를 반환하는 것이
더 권장되는 패턴이다. -
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;
}글자가 억지로 줄바꿈 되거나 하는 현상을 막아주는 옵션들.
기억해두면 굉장히 유용하게 사용할 수 있을 것 같다.
