Q2. 여러 input의 상태를 하나로 묶을까, 각각 둘까?

크루의 질문

“각 input에 들어가는 카드 정보들을 각각의 state로 관리해야 할지, 하나의 state에서 배열로 관리하고 각 input에서 index 정보를 알고 있게 한 뒤 index 정보로 setter를 호출할지 고민입니다.” — 라바·찰리 페어

“비슷한 여러 상태 데이터를 하나로 만들어야 할지, 혹은 각각 만들어야 할지? (카드 번호/유효기간/CVC). 하나의 데이터(카드번호)이지만 input이 4개인 경우, 상태를 나누는 것이 맞을까?” — 도넛·두부 페어

“각 input에 들어가는 정보에 대해서, state를 어떤 구조로 관리하는 게 좋을지 고민했습니다.” — 윤돌·비비빙 페어

“카드 번호 input을 어떤 구조(단일 string, string[], object)로 관리해야 할지.” — 아지·애니 페어

AS-IS 코드

🔍 읽기 전에

이 객체의 필드들은 함께 바뀌나요?

함께 바뀌는 일이 없다면, 한 객체로 묶은 이유는 무엇이었을까요?

// src/components/addCard/AddCard.jsx
import { useState } from 'react';
import AddCardForm from '../addCardForm/AddCardForm';
import Card from '../card/Card';
 
function AddCard() {
  const [card, setCard] = useState({
    firstCardNumber: '',
    secondCardNumber: '',
    thirdCardNumber: '',
    fourthCardNumber: '',
    expireMonth: '',
    expireYear: '',
    ownerName: '',
    securityCode: '',
    firstPassword: '',
    secondPassword: '',
  });
 
  const updateCard = (name, value) => {
    setCard((prevCard) => {
      return { ...prevCard, [name]: value };
    });
  };

공식문서 단서 — State 구조 선택

React 공식문서 Choosing the State Structure  (한글 번역)는 다섯 원칙을 제시한다:

1. Group related state. If you always update two or more state variables at the same time, consider merging them into a single state variable.
2. Avoid contradictions in state. When the state is structured in a way that several pieces of state may contradict and “disagree” with each other, you leave room for mistakes. Try to avoid this.
3. Avoid redundant state. If you can calculate some information from the component’s props or its existing state variables during rendering, you should not put that information into that component’s state.
4. Avoid duplication in state. When the same data is duplicated between multiple state variables, or within nested objects, it is difficult to keep them in sync. Reduce duplication when you can.
5. Avoid deeply nested state. Deeply hierarchical state is not very convenient to update. When possible, prefer to keep state flat.

핵심: “카드 번호와 유효기간이 항상 함께 바뀌나?” — 답이 No라면 한 state로 묶을 이유가 약하다. 이 원칙은 라바·도넛·아지의 고민에 적용해볼 수 있는 결정 기준이다.

선배 PR 읽기 가이드

추가 읽을거리 — Kent C. Dodds

연관 PR 더 보기