여러줄 말줄임
3가지 방식으로 구현한 동적 말줄임 컴포넌트
#1. Reactcanvas - 3줄말줄임
핵심:useRef + measureLines + WebkitLineClamp - 캔버스 기반 측정으로 3줄 초과 여부를 판단하여 말줄임 처리
✅ 장점: 정확한 측정, 성능 최적화, 간단한 구현
❌ 단점: 캔버스 의존성, 브라우저 호환성 고려 필요
💡 사용 시나리오: 정확한 라인 측정이 필요한 경우, 성능이 중요한 경우
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Veniam beatae dolores commodi consequatur expedita minus aut blanditiis pariatur fuga error optio delectus,
nesciunt voluptatem magni debitis, nihil voluptatum autem eum.
Debitis aut, itaque voluptate soluta libero provident explicabo, iusto doloribus deserunt velit quis possimus.
Sed porro deserunt, a recusandae nostrum aspernatur, accusantium temporibus,
totam officiis repellendus consequuntur ipsa nisi facilis!
Itaque porro optio exercitationem. Nobis molestias perferendis qui enim eos tempora ut placeat dolor,
mollitia pariatur repudiandae consequuntur illo dignissimos, optio reprehenderit natus obcaecati,
minima labore nemo tenetur vel amet.
Dolore consequatur explicabo esse voluptas architecto maxime ipsam animi necessitatibus amet, eligendi in deleniti molestiae aspernatur minus iste ratione expedita delectus neque nostrum! Quas quaerat atque quod ullam iste minima!
Dolorum iure debitis tempore, voluptas enim maxime voluptate in, voluptatem omnis facilis asperiores distinctio eius necessitatibus placeat autem quod cumque suscipit nulla non quaerat odio iste atque consequuntur eveniet. Natus.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Veniam beatae dolores commodi consequatur expedita minus aut blanditiis pariatur fuga error optio delectus,
nesciunt voluptatem magni debitis, nihil voluptatum autem eum.
Debitis aut, itaque voluptate soluta libero provident explicabo, iusto doloribus deserunt velit quis possimus.
Veniam beatae dolores commodi consequatur expedita minus aut blanditiis pariatur fuga error optio delectus,
Dolorum iure debitis tempore, voluptas enim maxime voluptate in, voluptatem omnis facilis asperiores distinctio eius necessitatibus placeat autem quod cumque suscipit nulla non quaerat odio iste atque consequuntur eveniet. Natus.
#2. Reactclone - 동적 줄 수 말줄임
핵심: useRef + clone + offsetHeight - 숨겨진 clone 요소로 실제 높이를 측정하여 동적 줄 수 말줄임 처리
✅ 장점: 동적 줄 수 지원, 정확한 측정, 브라우저 호환성 좋음
❌ 단점: DOM 요소 추가, 복잡한 레이아웃 계산
💡 사용 시나리오: 다양한 줄 수가 필요한 경우, 정확한 높이 측정이 필요한 경우
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Veniam beatae dolores commodi consequatur expedita minus aut blanditiis pariatur fuga error optio delectus,
nesciunt voluptatem magni debitis, nihil voluptatum autem eum.
Debitis aut, itaque voluptate soluta libero provident explicabo, iusto doloribus deserunt velit quis possimus.
Sed porro deserunt, a recusandae nostrum aspernatur, accusantium temporibus,
totam officiis repellendus consequuntur ipsa nisi facilis!
Itaque porro optio exercitationem. Nobis molestias perferendis qui enim eos tempora ut placeat dolor,
mollitia pariatur repudiandae consequuntur illo dignissimos, optio reprehenderit natus obcaecati,
minima labore nemo tenetur vel amet.
Dolore consequatur explicabo esse voluptas architecto maxime ipsam animi necessitatibus amet, eligendi in deleniti molestiae aspernatur minus iste ratione expedita delectus neque nostrum! Quas quaerat atque quod ullam iste minima!
Dolorum iure debitis tempore, voluptas enim maxime voluptate in, voluptatem omnis facilis asperiores distinctio eius necessitatibus placeat autem quod cumque suscipit nulla non quaerat odio iste atque consequuntur eveniet. Natus.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Veniam beatae dolores commodi consequatur expedita minus aut blanditiis pariatur fuga error optio delectus,
nesciunt voluptatem magni debitis, nihil voluptatum autem eum.
Debitis aut, itaque voluptate soluta libero provident explicabo, iusto doloribus deserunt velit quis possimus.
Veniam beatae dolores commodi consequatur expedita minus aut blanditiis pariatur fuga error optio delectus,
Dolorum iure debitis tempore, voluptas enim maxime voluptate in, voluptatem omnis facilis asperiores distinctio eius necessitatibus placeat autem quod cumque suscipit nulla non quaerat odio iste atque consequuntur eveniet. Natus.
#3. VanillaMutationObserver - 동적 말줄임
핵심: MutationObserver + clone + DOM 조작- DOM 변경 감지로 동적 말줄임 처리
✅ 장점: 순수 JS, 성능 최적화, 메모리 효율적
❌ 단점: 복잡한 DOM 조작, 디버깅 어려움
💡 사용 시나리오: React 없이 사용해야 하는 경우, 성능이 매우 중요한 경우
Vanilla JS LineClamp