[260512] TIL

Today I Learned (2026-05-12)

코드 리뷰 메모

• export는 알파벳 순으로 두면 자연스럽고, <section> 래퍼 없이 ~Section이라고 이름 붙이면 동료 입장에서 일관성이 깨져 보인다. 네이밍은 실제 구조와 짝이 맞아야 한다.
• 상태를 props로 넘기지 않으면 uncontrolled 컴포넌트가 되어 시각 상태와 React state가 어긋날 수 있다. 함께 관리돼야 하는 값이면 안전하게 같이 넘기는 게 좋다.

controlled vs uncontrolled

• 통제의 본질은 “진실의 출처가 어디냐”다. checked(또는 value)를 넘겨야 React가 매번 DOM에 값을 밀어넣어 controlled가 되고, onChange는 “사용자가 방금 뭔가 했다”는 알림 채널일 뿐 통제 여부를 결정하지 않는다.
• 모달이 unmount 없이 hide만 되는 패턴에서 uncontrolled 체크박스는 상태가 DOM에 남아, 다시 열면 이전 체크가 그대로 보인다. controlled로 바꿔 React를 단일 진실 공급원으로 두면 setState 한 번에 시각 상태까지 맞춰진다.

Tailwind group/peer/has, inert vs disabled

• 직접 형제 관계는 peer-*, 부모→자식 전파는 group-*, 폼 안 어딘가의 조건을 보고 다른 요소에 반영할 땐 group-has-[...]를 쓴다.
• disabled는 폼 요소 한정 시맨틱이라 SVG·div의 클릭은 못 막는다. 영역 전체를 막고 접근성 트리에서도 빼려면 inert를 써야 한다. 다만 inert 영역의 input 값은 폼 제출에 그대로 포함되고, disabled만 값에서 제외된다.

YAGNI vs DRY

• 한 곳에서만 쓰는 컴포넌트에 size·variant·icon 같은 props를 미리 다 열어두면 쓰지 않는 죽은 코드가 되기 쉽다. DRY가 “반복을 줄여라”라면 YAGNI는 “반복이 실제로 생기기 전엔 추상화하지 마라”는 쪽이라, 두 번째 사용처가 나올 때 공통화하는 게 정석이다.