[Javascript/React] element가 오버플로우중인지 여부 판단하기

  이따금씩 자바스크립트 단에서 특정 element가 오버플로우 중인지 여부를 파악해야 할 때가 있다. 아래와 같은 경우를 예로 들어보자. 유튜브에서는 영상 설명이 일정 길이 이상의 텍스트일 때는 더보기 버튼을 토글함으로써 전체 내용 확인, 간략히 확인 기능을 제공하고 있다. 그렇다고 텍스트가 매우 짧을 때에도 더보기 기능을 제공할 필요는 없다. (Lofi 코딩은 그냥 코딩할 때 자주 들어서 골랐다)

 

  이럴 때 아래와 같이 코드를 작성하면 특정 element가 오버플로우중인지 여부를 실시간으로 감지할 수 있다. defineIsOverflowing 함수는 x축 기준, y축 기준으로 element가 오버플로우중인지 여부를 검사한다. 물론 두 축 중 하나만 검사하고 싶은 경우 검사할 축을 인자로 전달받는 식으로 조정할 수 있을 것이다. window가 resize할 때마다 overflow 여부를 검사하는 이벤트 리스너를 추가해준다. 또한 맨 처음 화면이 렌더링되었을 때에는 resize 이벤트가 발생하지 않으므로 defineIsOverflowing 함수를 별도로 한 번 실행해준다. 이제 저 isOverflowing 변수를 기준으로 원하는 작업을 수행할 수 있다.

 

 

 

  리액트 프로젝트를 수행하는 경우 useIsOverflowing 훅을 별도로 만들어주면 더 편리하게 작업할 수 있다. 자바스크립트인 경우 문제가 되지 않지만 타입스크립트를 사용하는 경우 reference 타입이 문제가 되어 제네릭 타입을 사용해주었다. 또한 그냥 제네릭 타입 T를 그냥 extends any로 선언하는 경우 clientWidth 등의 프로퍼티를 사용하지 못하는 오류가 발생해서 일단 HTMLElement를 확장하는 방식으로 작성해주었다.

 

useIsOverflowing.ts

 

 만약 자바스크립트 프로젝트에서 해당 코드를 사용하고 싶다면 이렇게 타입 관련 코드를 지워주면 된다.