Content
내용 우선으로 break point의 이유를 정한다
CSS
가능한 배치 변화는 media/container query에 둔다
State
상호작용 상태만 React가 맡게 좁힌다
Stability
hydration과 CLS를 같은 축에서 확인한다
내용 우선 배치
카드, 폼, 내비게이션이 작은 폭에서 어떤 순서로 읽혀야 하는지 먼저 정한다.
픽셀보다 정보 우선순위가 먼저다CSS로 해결
grid, flex, media query, container query로 가능한 변화는 렌더 구조를 바꾸지 않는다.
CSS가 맡으면 hydration 문제가 줄어든다상태 개입
모바일 메뉴 열림, 탭 전환, 측정 기반 virtual list처럼 상호작용이 필요한 부분만 React 상태로 둔다.
window width state 남발을 피한다SSR 경계 처리
서버와 클라이언트의 첫 렌더가 다른 markup을 만들지 않도록 기본 레이아웃을 안정화한다.
client-only 분기는 hydration 경고를 만들 수 있다레이아웃 안정성 확인
이미지 크기, 폰트 로딩, 조건부 영역이 CLS를 만들지 않는지 본다.
반응형은 흔들리지 않아야 한다Breakpoint
뷰포트 기준 변화
페이지 전체 골격이 폭에 따라 바뀔 때 media query를 쓴다.
중단점은 콘텐츠가 깨지는 지점에서 잡는다
Container
부모 폭 기준 변화
카드나 패널이 놓인 공간에 따라 자체 레이아웃을 바꾼다.
재사용 컴포넌트에 특히 유리하다
State
사용자 조작 변화
메뉴 열림, 필터 패널, drawer처럼 상호작용이 있는 변화는 React가
맡는다.
CSS 표시만으로 접근성이 깨지지 않게 한다
Hydration
첫 렌더 일치
서버에서 모르는 viewport 값으로 markup을 갈라 만들지
않는다.
CSS로 숨기는 쪽이 안전할 때가 많다