[리액트] TUI grid resize 에러

한 줄 요약 : "TUI grid 너비 변경될 때 transition 사용하면 refreshLayout() 함수가 작동을 안 해요!"

상황

왼쪽 사이드에 메뉴바가 있는 어드민 사이트가 있는데 이 사이드 메뉴바를 접어서 콘텐츠를 볼 수 있는 영역을 넓히려 했다!
하지만 TUI grid가 자동으로 변경되지 않아서 메뉴바는 접혀도 본문의 너비는 그대로였다🫠

해결

여기서 사용된 TUI grid 컴포넌트는 부모 컴포넌트의 사이즈가 변경되면 자동으로 width값을 측정해서 리렌더링하게 되어 있다. 그런데 간혹 변경을 자동으로 인지하지 못할 경우 Instance Methods 중 refreshLayout() 함수를 사용해 수동으로(?) 리렌더링을 발생시킬 수 있다.

• TUI 공식 문서 - Instance Methods 사용법
• refreshLayout 함수

하지만 이렇게 해결되었다면 이 포스팅은 나오지 않았을 것이다...!
분명 메뉴가 숨김 처리될 때마다 refreshLayout 함수를 작동시켰는데도 버그는 해결되지 않았다😂

(진짜) 해결

정확히 이런 상황이었습니다

부모 컴포넌트 변경에 css transition가 쓰이면 TUI grid는 컴포넌트 변경을 인지하지 못한다!
(아니 대체 왜..? 이거 고쳐주세요!)
transition을 제거하자 refreshLayout()는 제 역할을 잘 해냈고 본문의 너비도 늘어났다.
해결!✨