Q3. 카드번호 — UI는 4개의 input, 데이터는 1개의 문자열로 다룰 수 있을까?

크루의 질문

“첫번째 인풋에 4자, 2번째 인풋에 2자, 3번째 인풋에 4자, 4번째 인풋에 4자의 번호를 입력하여 총 14자의 카드번호를 입력받았을 때, 이를 결국 하나의 문자열(숫자로 구성된)로 이어붙여 다루게 되는데, 이 정보를 바탕으로 카드 미리보기를 보여주면 빠진 2자가 가장 뒤에 있다고 표시하게 될 것 같습니다. 이를 위해 굳이 카드 번호를 4개의 영역으로 나눠 관리해야 하는지 고민이 듭니다.” — 클라우디·해니 페어

“하나의 데이터(카드번호)이지만 input이 4개인 경우, 상태를 나누는 것이 맞을까?” — 도넛·두부 페어

AS-IS 코드

🔍 읽기 전에

카드번호의 진짜 단위는 1개일까요, 4개일까요?

이 코드에서 두 단위가 만나는 자리는 어디인가요?

// src/components/CardAdditionForm.js
const formatCardNumbers = (numbers) => {
  const [...firstTwoNumbers] = numbers.slice(0, 2);
  const [...secondTwoNumbers] = numbers.slice(2);
 
  const hiddenNumbers = secondTwoNumbers.map((value) =>
    FORMAT_CHAR.HIDDEN_NUMBER.repeat(value.length)
  );
 
  return [...firstTwoNumbers, ...hiddenNumbers]
    .map((number) => (number ? number : ""))
    .join(FORMAT_CHAR.CARD_NUMBERS_SEPARATOR);
};
 
const formatExpirationDate = (expirationDate) => {
  return Object.values(expirationDate)
    .filter((value) => value !== "")
    .join(FORMAT_CHAR.EXPIRATION_DATE_SEPARATOR);
};
 
const CardAdditionForm = (props) => {
  const [
    cardNumbers,
    cardNumbersInputRef,
    onCardNumbersChange,

공식문서 단서 — Reacting to Input with State

React 공식문서 Reacting to Input with State  (한글 번역)는 명령형 사고에서 선언형 사고로 옮겨가는 다섯 단계를 안내한다:

1. Identify your component’s different visual states.
2. Determine what triggers those state changes.
3. Represent the state in memory using useState.
4. Remove any non-essential state variables.
5. Connect the event handlers to set the state.

특히 4단계의 “필수적이지 않은 state를 제거한다” 는 기준이 클라우디·해니 페어의 고민과 직접 만난다. 여기에 Choosing the State Structure 의 “렌더링 중 기존 props/state로 계산할 수 있으면 state에 두지 않는다” 는 원칙을 함께 적용해볼 수 있다. 4분할은 UI 표현일 뿐 데이터의 본질은 1개의 문자열이라면, 4분할은 파생이고 상태로 둘 필요가 없다.

이 카드는 Q2와 함께 읽으면 좋다. Q2가 “여러 종류의 상태를 묶을까” 를 묻는다면, Q3은 “같은 종류의 상태를 UI 단위에 맞춰 나눌까” 를 묻는다.

선배 PR 읽기 가이드

추가 읽을거리 — Kent C. Dodds

연관 PR 더 보기