컴포넌트가 overflow 되었는지 확인하는 방법

아래와 같이 ref를 사용해서 확인할 수 있다.

function 임시컴포넌트() {
  	const 알고싶은컴포넌트의Ref = useRef<HTMLDIVElement>(null);
    
    const [isOverflowed, setIsOverflowed] = useState<boolean>(false);

    useEffect(() => {
      setIsOverlowed(!!알고싶은컴포넌트의Ref.current && 알고싶은컴포넌트의Ref?.scrollHeight > ref.current?.clientHeight);

	return <알고싶은컴포넌트 ref={알고싶은컴포넌트의Ref} isOverflowed={isOverflowed}>
             / *** /
            <알고싶은컴포넌트>
}
              
const 알고싶은컴포넌트 = styled.div<{isOverflowed : boolean}>`
  bottom-border: ${({isOverFlowed}) => isOverFlowed && `1px solid blue`};
`

이렇게 하면 끝~

나중에 컴포넌트의 overflow 여부를 확인해야하는 로직이 많아지면
파라미터로 x,y,all 이렇게 받아서, x축이 overflow인지 y축이 overflow인지 전부 overflow인지 확인하는 훅을 만들어서 써야겠다. (시간이 남아서 훅을 만들었다. useIsOverflow)

아니면 container 쿼리로 css를 사용하여 간단하게 처리할 수 도 있다.
올해 스타일드컴포넌트가 v6으로 업데이트 되면서 컨테이너 쿼리를 사용할 수 있게 되었다.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries