Refactor/#002 리스트 가상화 #15
Conversation
- data-id로 바로 접근하도록 수정 #2
| estimateSize: () => 24, | ||
| overscan: 5, |
There was a problem hiding this comment.
estimateSize는 기본 블럭 사이즈 24px로 뒀습니다
overscan은 5정도가 되어야 자연스럽게 보였습니다!
| {virtualizer.getVirtualItems().map((virtualRow) => { | ||
| const block = editorState.linkedList.spread()[virtualRow.index]; | ||
| return ( | ||
| <Block | ||
| testKey={`block-${virtualRow.index}`} | ||
| virtualStart={virtualRow.start} | ||
| virtualIndex={virtualRow.index} | ||
| virtualRef={virtualizer.measureElement} |
There was a problem hiding this comment.
virtualizer.getVirtualItems()
원래는 map의 index를 기준으로 몇번째 block인지 접근했었는데
이번에는 virtualizer.getVirtualItems() 가 반환해주는 값이, 뷰포트에 보여지는 아이템 갯수들만 있기 때문에 map의 Index를 쓰면 안됩니다!
대신 virtual 라이브러리에서 제공해주는 index가 순서 index라, 그걸 사용해줘서 몇번째 block인지 뽑아왔습니다
There was a problem hiding this comment.
virtualRef
이건 각 아이템이 가변적인 높이일때 ref로 넣어줘야합니다. 라이브러리에서 제공하는 measureElement 를 넣어줘야하는데, 처음에 props이름을 그냥 ref로 했었는데 props 전달이 안되더라구요..
ref={virtualizer.measureElement} // 이게 안됨
그래서 virtualRef라는 이름으로 넣어줬습니다
| data-id={id} | ||
| data-index={virtualIndex} | ||
| key={virtualIndex} |
There was a problem hiding this comment.
data-id는 caretUtil에서 특정 block을 찾기위해 넣어줬습니다.
data-index는 tanstack virtual 라이브러리에서 data-index를 기준으로 요소를 찾더라구요! 그래서 무조건 필요한 값입니다
key도 tanstack virtual 라이브러리에서 필요한 값입니다!
| top: 0, | ||
| left: 0, | ||
| width: "100%", | ||
| transform: `translateY(${virtualStart}px)`, |
There was a problem hiding this comment.
해당 start를 통해 어디에 위치시킬지 보여줍니다!
…b33-Nocta into refactor/#2-리스트-가상화 # Conflicts: # client/src/features/editor/Editor.tsx
📝 변경 사항
🔍 변경 사항 설명
📷 스크린샷 (선택)
2025-01-22.5.13.27.mov
✅ 작성자 체크리스트