React Hooks를 사용하여 프로그래밍 방식으로 요소 배치

React Hooks를 사용하여 페이지에서 렌더링해야 하는 구성 요소를 알려주는 방법을 살펴보겠습니다.

즐겨찾는 검색 엔진을 상상해 보세요. 검색어를 입력하면 검색 입력 아래에 자동 완성 상자가 표시될 것입니다. 플로팅 요소를 만들어 보겠습니다.

TLDR;

여기codesandbox.에서 문제 및 솔루션의 전체 예를 찾으십시오.

그럼 크래킹을 해봅시다. 지금 당장은 너무 많은 세부 사항 없이 예제에서 표시할 콘텐츠가 있는 경우 요소를 표시하는 이동 솔루션을 찾을 수 있습니다. 또한 이 go-to가 표시될 때 아래로 이어지는 모든 요소를 ​​이동하는 것을 볼 수 있습니다. 별로 좋지 않습니다.

동적으로 만들기

먼저 컨테이너가 다른 요소 위에 떠 있도록 빠른 스타일을 추가해 보겠습니다.

.searchresultsfloat {
  position: absolute;
  z-index: 1;
}

useRef

이제 이야기에서 우리는 위치를 연결하려는 요소를 알아야 합니다. 여기에서 useRef가 개입합니다. useRef를 사용하여 DOM 요소에 연결할 수 있는 참조를 만들 수 있습니다.

// Create our reference
const searchBarReference = React.useRef(null);

// Other React Pizzazz...

// Attach it to the element we want to judge our position against
<div ref={searchBarReference} className="box blue searchcontainer">

새로 참조된 요소가 렌더링되면 .current 변수에 있는 자신에 대한 정보로 참조를 채웁니다. 그런 다음 해당 참조에서 getBoundingClientRect() 함수를 호출하여 요소의 위치를 ​​학습할 수 있습니다.

useEffect 후크 내에서 이를 수행하여 참조된 요소의 위치를 ​​학습할 때 페이지가 렌더링된다는 것을 알 수 있습니다.

React.useEffect(() => {
  if (searchBarReference.current) {
    setSearchResultTop(searchBarReference.current.getBoundingClientRect().bottom);
  }
}, []);

완벽한! 하지만 정답은 아닙니다. 이제 요소 렌더링이 필요한 위치에 있습니다. 그러나 화면 크기를 조정하면 결과 요소가 잘못된 위치에 있는 것을 볼 수 있습니다.

useLayoutEffect

이것은 useLayoutEffect 후크가 들어갈 수 있는 곳입니다. 이 후크는 모든 DOM 변형 후에 트리거된다는 유일한 차이점을 제외하면 표준 useEffect 후크와 동일하게 보입니다. 우리는 이것을 우리의 장점으로 사용할 수 있습니다:

React.useLayoutEffect(() => {
  function updatePosition() {
    setSearchResultTop(searchBarReference.current.getBoundingClientRect().bottom);
  }
  window.addEventListener('resize', updatePosition);
  updatePosition();
  return () => window.removeEventListener('resize', updatePosition);
}, []);

여기에서 크기 조정 이벤트를 기다리는 리스너를 만듭니다. 하나가 발생하면 참조된 요소의 경계를 다시 확인하여 결과를 업데이트하여 원하는 위치에 표시할 수 있습니다. 따라서 화면 크기를 조정할 때 결과가 있어야 할 위치에 표시됩니다.

리스너를 제거하는 함수를 반환해야 페이지가 마운트 해제될 때 리스너가 더 많은 이벤트를 기다리지 않게 됩니다. 그리고 짜잔:

그게 다야.

그래서 우리는 요소가 어디에 있는지 알기 위해 useRef를 사용했고 DOM 변형을 업데이트하기 위해 useLayoutEffect를 사용했습니다. 모두가 행복합니다!

항상 그렇듯이 이것이 유일한 해결책이 아니라 내가 찾은 해결책입니다. 연락하고 싶으시면 해주세요!