코드잇 스프린트 위클리 미션 13주차 심화 요구사항을 구현하며

기능 요구사항

 

IntersectionObserver란 것을 처음 알게 되었다. 무한 스크롤을 구현할 때 스크롤 이벤트 보다는 성능상의 이점이 있기 때문에 무한 스크롤을 구현할 때 많이들 쓰는 기술인 것 같다.

 

 

위 페이지를 스크롤 할 때 링크 추가하기 부분이 보이지 않을때 이를 최하단에 고정시키라는 요구 사항이었다.

 

 

또 위처럼 footer가 보인다면 이를 보이게 하면 안되었다.

 

처음 작성한 코드

useEffect(() => {
    const observer = new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.target.id === "mainEntry") {
            if (!entry.isIntersecting) {
              setStyle({
                position: "fixed",
                bottom: 0,
                left: 0,
                right: 0,
                zIndex: 9999,
              });
            } else {
              setStyle({});
            }
          } else if ((entry.target.id = "mainExit")) {
            if (entry.isIntersecting) {
              setStyle({});
              flag.current = true;
            } else {
              if (flag.current) {
                setStyle({
                  position: "fixed",
                  bottom: 0,
                  left: 0,
                  right: 0,
                  zIndex: 9999,
                });
                flag.current = false;
              }
            }
          }
        });
      },
      {
        root: null,
        rootMargin: "0px",
        threshold: 1,
      }
    );

 

내 나름 직관적으로 짠 코드이다. 다른 사람이 보기에는 힘들겠지만, 

우선 나는 style이라는 state를 만들었다. 이름이 style인 이유는 이름 짓기가 번거로웠어서이다...ㅎ

 

사실, ref를 이용하지 않은 것도 마음에 들지 않고, 무엇보다 intersection observer의 callback안에서 setStyle을 해주게 되니 불필요한 로직이 추가가 되었다. (flag)

 

처음 작성한 코드의 개선점

각 요소의 intersecting 유무를 저장하는 state를 만들고 이를 통해 style을 조건부 방식으로 prop으로 내려주면 더 깔끔해질 것이다. 위 코드의 style을 조건부로 내려주어 두 요소가 모두 화면에 보이지 않을 때  FolderAddLinkArea를 "하단에 고정" 시키도록 하면 될 것이다.

 

더 나은 방법은 없을까?

사실 intersection observer를 리액트에서 구현한 블로그를 보면 거의 다 커스텀 훅을 사용했다. 위의 '처음 작성한 코드의 개선점'에서 state를 추가한다면 이 intersection observer를 위한 로직이 너무 길어지는 것은 아닌가 우려되었다. 그래서 이를 커스텀 훅으로 빼는 방법도 생각해볼만 할 것 같다

 

그래서, 이를 커스텀훅으로 한 번 빼 보았다!!

 

확실히 useIntersectionobserver라는 훅을 만들고 이를 이용하니 컴포넌트 내에서  심화 요구사항에 대한 코드가 간편해지긴 하는 것 같다. 

 

생각해볼점

컴포넌트를 어떻게 나누었는지에 따라 이 심화 요구사항 구현시 코드가 추가해야 할 게 있는 경우가 있었다. 처음부터 이를 고려하여 컴포넌트를 나누면 좋겠지만 힘든 것 같다.

 

 

(미완성)

+ 컴포넌트를 새로 만든 방식 적어보기