무한 스크롤 페이징 처리 구현

 

실무에서 성능 고려하여 유지보수등 가독성을 끌어올리기위하여 아래와 같은 작업을 진행했으며 부분적으로 올려서 예시 추가된 코드

 

리팩토링한 코드(타입 지정) - api 호출 타입 재정의 서비스단으로 api dto 생성 하는 부분 추가 -> https://github.com/asdf132645/reactToyProject/ 

GitHub - asdf132645/reactToyProject: reactToyProject

 

 

현회사에서 무한으로 스크롤 페이징이 되는 처리를 요구하였다. 

여기에 맞게 코드를 작성하고 만들기전에 전에 겪었던 문제점을 생각했다.

 

전에는 스크롤 위치를 잡아 구현 했을때 제대로된 동작을 안하고 엉뚱하게 흘러가는 부분이 있어서 다른 방법을 모색 하였다.

 

https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver

IntersectionObserver - Web API | MDN

 

new IntersectionObserver 라는 것을 사용하기로 하였다.

 

 

api 를 호출 하는 부분을 생성하고 

 

 <div className="app-container op-profile">
                <div className="open-main-mypage">
                    <div className="order-List" style={{minHeight: '930px'}}>
                        {inquiries?.length === 0 ?
                            <>
                                <div className="no-data">
                                    <div className="ic"><img src="/images/app/ico-no-pay-data.svg" alt=""/></div>
                                    <p className="description">
                                        내 문의내역이 없습니다.
                                    </p>
                                </div>
                            </>
                            :
                            <>
                                <ul>
                                    {inquiries.map((inquiry: any, idx: number) => (
                                        <li
                                            key={idx}
                                            onClick={() => {
                                                router.push(`/myPage/inquiry/inquiryDetail?id=${inquiry.id}&status=${inquiry.status}`);
                                            }}
                                        >
                                            <div>
                                                <p
                                                    className={
                                                        inquiry.categoryName === 'ETC' ?
                                                            'category col-4'
                                                            : inquiry.categoryName === 'JOIN' ?
                                                                'category col-3'
                                                                : inquiry.categoryName === 'TAX' ?
                                                                    'category col-1'
                                                                    : inquiry.categoryName === 'EMPLOYEE' ?
                                                                        'category col-2'
                                                                        : 'category col-4'
                                                    }
                                                >
                                                    {inquiry.category}
                                                </p>
                                                <p className="subject"
                                                   style={{whiteSpace: 'pre-wrap'}}>{inquiry.title}</p>
                                                <p className="datetime">{formatDate(inquiry.writtenAt)}</p>
                                            </div>
                                            <p className={`status ${inquiry.status === 'A' ? 'end' : 'ing'}`}>
                                                {inquiry.status === 'A' ? '답변완료' : '답변대기'}
                                            </p>
                                        </li>
                                    ))}
                                </ul>
                            </>
                        }
                        <div ref={loadMoreRef} style={{height: '10px'}}></div>
                    </div>
                </div>
            </div>

 

태그 부분을 생성해주고

 

<div ref={loadMoreRef} style={{height: '10px'}}></div>

 

원하는 위치에 ref 로 해당 영역을 잡아준다. 해당 위치로 스크롤이 내려갈 시 api 호출하는 방법이다.

 

 

간단하게 useEffect 훅을 사용하여 작성하면 기능 구현 완료