Q4. 공통 Input/Fieldset 컴포넌트 — 합성을 위해 만드는 게 맞을까?

크루의 질문

“공통 fieldset 컴포넌트를 사용하여 카드번호, 유효기간, cvc의 컴포넌트를 만들었습니다. payment에서 이 컴포넌트들을 합성하여 사용하였고, value 상태랑 유효성 검사 값이 payment에 있는데, 공통 fieldset 컴포넌트가 필요한지 궁금합니다.” — 콘티·먼지 페어

“컴포넌트 쪼개는 기준에 대해 얘기를 많이 했습니다.” — 파라디·피트·이현 페어

AS-IS 코드

🔍 읽기 전에

이 Input 컴포넌트의 책임을 한 문장으로 적어보면 어떨까요?

그 한 문장에 몇 가지 일이 들어 있나요?

// src/components/@common/Input/Input.tsx
Input.Label = Label;
Input.Limit = Limit;
 
export default Input;
 
interface InputItemsContext {
  itemMap: Map<string, { ref: RefObject<HTMLInputElement | null> }>;
}
 
const InputItemsContext = createContext<InputItemsContext>({
  itemMap: new Map(),
});
 
const useInputItemsContext = () => useContext(InputItemsContext);
 
function InputItemsProvider({ children }: PropsWithChildren) {
  const itemMap = useRef<InputItemsContext['itemMap']>(new Map()).current;
 
  return <InputItemsContext.Provider value={{ itemMap }}>{children}</InputItemsContext.Provider>;
}
 
function InputItem({ children }: PropsWithChildren) {
  const { itemMap } = useInputItemsContext();
  const childrenArray = Children.toArray(children);

공식문서 단서 — children으로 합성하기

React 공식문서 Passing JSX as children  (한글 번역)이 합성의 기초를 보여준다:

When you nest content inside a JSX tag, the parent component will receive that content in a prop called children.

페이먼츠에서 fieldset은 *시각적 묶음(레이블 + 입력 영역)*이라는 구조 역할만 가질 수 있다. 그 안에 들어가는 input의 종류·검증·자동 이동이 다르다면, 합성의 단위는 fieldset이 아니라 각 도메인 영역일 수 있다 — children은 부모가 자식의 종류를 알 필요가 없을 때 가장 강하다.

추가로 Reusing Logic with Custom Hooks  (요약)의 “같은 코드가 여러 곳에서 반복되면 Custom Hook으로 추출할 수 있다” 는 기준과 짝지어 볼 수 있다. Q1에서 본 AHA 원칙(먼저 1단계 스타일로 완성한 뒤 중복을 본 뒤 추출)을 컴포넌트 추출에도 적용하면, 공통 컴포넌트는 중복과 변화 방향을 본 뒤 만든다는 쪽이 더 안전하다.

선배 PR 읽기 가이드

추가 읽을거리 — Kent C. Dodds · Dan Abramov

연관 PR 더 보기