# 20210728(수)

오랜만에 쓰는 일기장.... 무한스크롤을 구현했다.

## 스크롤바에 이벤트를 걸어 무한스크롤을 구현

> 처음 만들었을 때 사용한 방법

처음만들었던거 치고는 굉장히 쉽고 빠르게 만들었다. 하지만 인터넷의 많은 글을 보니 스크롤에 이벤트를 거는 방법을 추천하지 않는거같았다. 성능에 많은 영향을 끼친다고 한다.

이런 이슈에 대한 해결책으로 `IntersectionObserver API` 를 많이 사용한다. 따라서 `IntersectionObserver API` 를 이용하는 방법으로 변경했다.

## IntersectionObserver API

인터넷에 있는 글들을 보면 다 너무 어렵게 설명하는데 [구글 크롬 디벨로퍼](https://www.youtube.com/watch?v=kW_atFXMG98\&ab_channel=GoogleChromeDevelopers) 의 영상을 보면 아주 간단히 잘 설명해준다. 이 영상과 [MDN문서](https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API#intersection_observer_%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0) 로 기본을 구현해봤다.

그리고 `IntersectionObserver` 를 컴포넌트 내부에서 구현하다 보니 간단한 로직인데도 불구하고 컴포넌트가 두꺼워지는 문제가 생겼다. 따라서 `customHook` 으로 만들어서 컴포넌트에서 분리했다. 분리함으로써 다른 프로젝트에서도 사용할 수 있게되는 `재사용성`을 얻을 수 있었다.

## 기타..

`html` 의 `meta` 에 대해 조금 더 알게되었다.

```markup
 <meta
   name="description"
   content="User's comment data list with infinite scrolling"
 />
```

이렇게 작성하면, `slack` 같은 곳에서 해당 링크를 보내면 설명란에 `content`에 적은 내용이 나온다. 아래처럼

![짜잔](https://2315162687-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MO1zujRJyNAUnlhg0GB%2F-MfceblwqVSyGjaSEgpQ%2F-Mfcegw4IUr5E41JCsZN%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-07-28%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2012.51.16.png?alt=media\&token=cc51daac-558b-434e-9b87-f57a35a2d6c8)

## 정리 링크

1. [IntersectionObserverAPI 로 무한스크롤 구현](https://simian114.gitbook.io/blog/undefined/react/intersectionobserverapi)
2. [useEffect내에서 state의 dependency 문제](https://simian114.gitbook.io/blog/undefined/react/useeffect-state-dependency)