타입스크립트 컴포넌트 스타일링

className에 line-clamp-{} 괄호안에 동적으로 숫자를 변경하고 싶다.
 
 
1. makeClassName함수는 className에서 line-clamp를 백팃을 이용해 동적으로 생성한다
 

export const makeClassName = (setting: string, _className?: string, numberOfLines?: number) =>
  [setting, numberOfLines ? `line-clamp-${numberOfLines}` : '', _className].join(' ')

 
 
2. 리액트에서 구조 분해 할당을 사용하여 _className과 numberOfLines 값을 props로 전달, 이 값들은 makeClassName 함수에 전달되어 최종 클래스 이름을 생성하는 데 사용된다. 
 

2-1. className에는 세 종류의 클래스가 포함된다
• 기본 클래스: 'font-bold text-5xl text-center whitespace-pre-line'
• 동적으로 생성된 클래스: line-clamp-{5}
• 추가된 클래스: _className에 추가된 클래스

import type {FC, DetailedHTMLProps, HTMLAttributes} from 'react'
import {makeClassName} from './textUtil'

// p태그 속성 타입 정의
type TextProps = DetailedHTMLProps<
  HTMLAttributes<HTMLParagraphElement>,
  HTMLParagraphElement
>

export type TitleProps = TextProps & {
  numberOfLines?: number
}

// 구조분해할당
export const Title: FC<TitleProps> = ({
  className: _className,
  numberOfLines,
  ...props
}) => {
  const className = makeClassName(
    'font-bold text-5xl text-center whitespace-pre-line',
    _className,
    numberOfLines
  )
  return <p {...props} className={className} />
}

}

 
 
3. 타이틀 컴포넌트 속성값에 numberofLines값을 5로 설정, 텍스트줄이 길더라도 5줄로 제한된다.
 

import {Title,Subtitle} from "../components"
import { useResponsive } from "../contexts"

export default function ResponsiveContextTest() {
    const breakpoint = useResponsive()
    return (
        <section>
            <Title numberOfLines={5}>랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤
            랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤
            랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤
            랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤
            랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤
            랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤
            랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤랜덤
            
            </Title>
            <div className="mt-4">
                <Subtitle>breakpoint: {breakpoint}</Subtitle>
            </div>
        </section>
    )
}

 
 
 
4. 최종화면 
 

className = line-clamp-5 로 설정되어 있다

 
 
 
 
 
참고한 책입니다.
https://www.yes24.com/Product/Goods/125567157

Do it! 리액트로 웹앱 만들기 with 타입스크립트 - 예스24