개요

컴포넌트 내부의 state 값을 바로 정할 수 없으면 어떻게 해야 할까?

문제

이전 글에서 다루던 페이지 레이아웃에서, 종종 사용자가 첫 페이지가 아니라 마지막 페이지를 표시하고 싶을 경우가 있다. 이때 문제는

Page 갯수가 그려야 할 데이터와, 그 데이터를 그리는 CSS 레이아웃에 의존하고 있기 때문에 그리기 전에 페이지 갯수를 알 방법이 없다.

대안: useLayoutEffect

useLayoutEffect(..., ...all deps determining CSS layout)

레이아웃을 결정하는 모든 요소를 React가 알고 있다면, 이론상 CSS가 결정되는 시점에 바로 callback이 실행되도록 할 수 있다. useLayoutEffect를 이용하면 이론상 유저가 변경된 화면을 보기 직전에 실행되기 때문에 모든 state를 결정하는 것도 가능하다.

공식 Reference

잡설

사실 이 결론으로 도달하기 전에는 여러가지 이상한 디자인을 많이 생각했다. Lazy component 같은 접근으로 page count를 외부에서 결정하고, 자식 컴포넌트가 결정된 page count를 받아서 cursor state 계산과 이후 처리를 한다던지 하는 것도 막 고민해 보고 그랬는데, cursor 관리를 자식에게 맡기면 로직이 너무 복잡해지고, 직관적으로 봤을 때에도 페이지 관리하는 컴포넌트가 자기 커서 위치를 모른다는 것도 말이 안되는 것 같아서, 몸 비틀다 보니까 그냥 간단하게 기존 hook api로 “되는데요?” 하게 되었다.