> For the complete documentation index, see [llms.txt](https://simian114.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simian114.gitbook.io/blog/undefined-1/undefined/1/undefined.md).

# 월요일

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

{% content-ref url="/pages/-MfcWWWdLnvYylSRCvY6" %}
[IntersectionObserverAPI로 무한스크롤 구현](/blog/undefined/react/intersectionobserverapi.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MfcWpMtfi5Cx1mLsAy\_" %}
[useEffect내에서 state의 dependency 문제](/blog/undefined/react/useeffect-state-dependency.md)
{% endcontent-ref %}

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

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

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

이런 이슈에 대한 해결책으로 `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`에 적은 내용이 나온다. 아래처럼

## 정리 링크

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://simian114.gitbook.io/blog/undefined-1/undefined/1/undefined.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.