S급 프론트엔드 개발자로 회귀하다 004화. List 구현하기 - 스크롤링을 하면 스크롤바가 덜덜 떨리네

이번에 이벤트 조회와 관련된 UI를 구현하면서, List 컴포넌트를 이용하여 정보를 나타내야하는 일이 생겼다.

찾아보니, CSS를 사용하지 않기 위해 사용하는 Material-UI 모듈에서 제공해주는 List 컴포넌트가 있었고, react-window 모듈에서 기본으로 제공하는  FixedSizeList 컴포넌트가 있었다.

둘 중 무엇을 사용할까 하다가, FixedSizeList를 사용하면서, 적당히 섞어서 쓰기로 결정했다.

아니 근데, 다 구현해놓고 보니까 특정 이상의 Item 밑으로 스크롤을 했을때 화면이 벌벌 떨기 시작하는게 아닌가?

증상을 좀더 관찰해보니, FixedSizeList의 props로는 itemSize, itemCount, itemData 등이 들어가는데, 여기서 itemSize를 아무리 변경해도 하위의 ListItem 컴포넌트들의 사이즈가 변경이 적용되지않는 것을 발견.. 무엇이 문제인지 삽질을 하기 시작했다.

그 결과, ListItem에서 props로 넘겨받은 기본 props인 ListChildComponentProps 인터페이스에 맞추어 style, index, data 등의 데이터들이 들어오는데, 넘겨받은 style값을 ListItem의 style 속성에 연결해주지 않은 것을 발견, 이를 넣어주니 곧바로 size 조정이 가능해지면서 떨림 현상이 사라졌다.

 mui같은 경우, sx 속성으로 style을 사용하니 별 문제가 없을 것 같은데, 만약 style 속성을 활용해 css를 대체하여 개발하는 방식을 선호하는 개발자라면 이 부분이 조심해야 할 부분일 것 같다는 생각이 든다.

 나중에 list를 다시 구현할 때, 벌벌 떨리는 증상이 있다면, FixedSizeList를 사용하였는지 꼭 체크할 것..

 

추가로, List 레이아웃 작업의 팁으로, List의 크기를 결정할 때 height로 조절을 자주 하는데, 이 때에 화면의 전체 사이즈를 window.innerWidth, innerHeight 속성으로 받아오면, 반응형 사이즈를 적용할 때 무척 편리해진다.

나는 위 함수를 useState를 이용해 CustomHook으로 이 Dimension 값을 받아올 수 있게 사용하고 있다.

 

그리고 List의 스크롤바 커스텀 팁으로, 구현하려는 List의 ClassName을 MyCustomScroll 등으로 지정하고, 이에 대한 MyCustomScroll.css 파일을 작성하여 ScrollBar 관련 스타일을 적용하게되면, 어지간하면 스타일이 잘 적용된다.

(MUI의 sx 속성으로 적용했더니 적용이 잘 안됨..)

 

- 5화 보러 가기 -

https://ngost.tistory.com/128