헤더 영역 이외에 클릭 시 검색 폼을 축소시키기 위해 useRef를 사용해야 했다.
이 때, 해당 ref를 자식 컴포넌트에 전달할 경우 일반 props처럼 ref에 접근할 수 없다.
const refHeader = useRef();
return (
<Header
ref={refHeader}
isScroll={isScroll}
isHeaderClick={isHeaderClick}
headerClick={headerClick}
/>
);
자식 컴포넌트에서 ref를 접근하기 위해서는 컴포넌트를 forwardRef
로 감싸줘야 접근할 수 있다.
forwardRef 내부의 (props, ref) =>함수의 두 번째 인자로 전달
const Header = forwardRef(({ isScroll, isHeaderClick, headerClick }, ref) => {
return (
<header ref={ref} css={headerContainer({ isHeaderClick })}>
/* 생략 ... */
</header>
);
});
export default Header;
CSS를 이용하여 문자열 줄의 일부만 보여주고 싶을 때는 Webkit을 이용하여 구현할 수 있다.
const ell = props => css`
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: pre-line;
`;
-webkit-line-clamp
은 콘텐츠를 지정한 줄 수만큼으로 제한할 수 있는 속성으로 overflow: hidden
속성과 함께 사용하여 넘치는 텍스트를 감출 수 있게 된다.