[250429 TIL] 컴포넌트 리셋에 key써먹기

🧨 문제 상황

컴포넌트 내 드롭다운 필터를 초기화(reset) 해야 하는 상황이 있었습니다.

처음에는 아래와 같은 방식으로 리셋을 구현했었는데, 계속 신경이 쓰였습니다.

const [isReset, setIsReset] = useState(false);

const handleReset = () => {
  setKeyword("");
  setPage(1);
  setTarget(All);
  setIsReset(true);
  setTimeout(() => setIsReset(false), 1000);
};

<AdminDropdown
  isReset={isReset}
/>

❗문제점

• setTimeout으로 리셋 flag를 1초 뒤에 false로 만드는 게 불안정하고 지저분했음
• Dropdown 컴포넌트 내부에서 isReset을 감지해 setLabel, onValueChange 등을 직접 호출해야 했음
• "리셋"의 책임이 Dropdown 외부에서도 내부에서도 분산되어 있어 관리가 어려워짐

---

✅ 해결 방법

👉 리렌더링을 이용한 상태 초기화

isReset 대신 key 값을 증가시키는 방식으로 리팩터링

const [resetKey, setResetKey] = useState(0);

const handleReset = () => {
  setPage(1);
  setTarget(All);
  setGender(All);
  setAgeGroup(All);
  setKeyword("");
  setResetKey(prev => prev + 1);
};

return (
  <div>
    <AdminDropdown
      key={`target-${resetKey}`}
      defaultLabel="전체"
      dropdownMenus={filterTargetsDropdownMenus}
      onValueChange={handleValueChange}
    />
    <AdminDropdown
      key={`gender-${resetKey}`}
      defaultLabel="성별"
      dropdownMenus={filterGendersDropdownMenus}
      onValueChange={handleValueChange}
    />
    <AdminDropdown
      key={`age-${resetKey}`}
      defaultLabel="연령"
      dropdownMenus={filterAgeGroupsDropdownMenus}
      onValueChange={handleValueChange}
    />
  </div>
);

---

💡 배운 점

• key 변경은 리액트가 해당 컴포넌트를 완전히 언마운트 → 리마운트하게 만듭니다.
• 이를 활용하면 Dropdown 내부 상태 (useState, useEffect 등)가 자연스럽게 초기화됩니다.
• 이전 방식보다 깔끔하고, reset 책임을 외부에서만 관리할 수 있어 역할이 명확해졌습니다.
• 적은 수의 컴포넌트에서는 이 방식이 매우 유용하고 가볍게 사용할 수 있음.

---

✍️ 인사이트

React의 key를 단순한 리스트 렌더링 구분용이 아니라 "리셋 트리거" 로 사용하는 것도 좋은 것 같습니다!
상태 초기화나 UI 리셋이 필요한 상황에서 적극적으로 고려할 수 있는 방법이라는 걸 새삼 느꼈습니다.