[React] 학습 - day8

Forwarding Refs

헤더 영역 이외에 클릭 시 검색 폼을 축소시키기 위해 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 속성과 함께 사용하여 넘치는 텍스트를 감출 수 있게 된다.