둘을 "비슷한 훅"으로 묶어 아는지, 페인트 기준 _동기/비동기_ 시점 차이와 비용까지 잡는 사람인지를 가른다.
두 훅 모두 commit 이후 실행되지만 _브라우저 페인트 기준_으로 시점이 다르다. useLayoutEffect는 DOM 변경 직후, 화면 표시 _전_에 동기 실행되어 측정·위치 보정·동기 스타일 보정처럼 레이아웃 민감 작업에 쓴다. useEffect는 페인트 후 비동기로 실행되어 데이터 요청·구독·로깅처럼 화면에 즉시 영향을 주지 않는 부수 효과에 적합하다. useLayoutEffect를 남발하면 페인트가 차단되어 "한 프레임 더 늦는" 효과를 만든다.
툴팁이 한 프레임 어긋나 보이던 버그를 useLayoutEffect로 잡아본 경험이 있다면 두 훅 시점 차이가 그대로 답변 후크가 된다
SSR 환경에서 useLayoutEffect 경고를 만나 isomorphic 대안을 만든 적이 있다면 깊이 있는 답이 된다
측정-보정 사이클을 한 프레임 안에 끝내본 적이 있다면 commit·페인트 사이 동기 실행 이유로 연결할 수 있다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.