React 상태 초기화 vs 원복, 뭐가 다른 걸까?

React를 쓰다 보면 상태 초기화, 상태 원복(되돌리기)을 다루게 되는 경우가 꽤 많다.

예를 들어…

• 사용자가 어떤 폼을 열었을 때 기본값으로 초기화하고 싶을 때
• 사용자가 입력하던 중 “취소” 버튼을 눌러서 원래 값으로 되돌리고 싶을 때

겉보기엔 비슷해 보이지만, 이 두 개는 의도와 동작이 엄연히 다르다.

이번 글에서는 "초기화"와 "원복"을 구분하는 이유,
그리고 실무에서 이걸 헷갈려 생긴 문제와 해결 방법을 정리해본다. 

 

---

초기화 vs 원복, 뭐가 다를까?

구분 초기화 (Reset) 원복 (Restore)

 

	초기화	원복
목적	상태를 기본값으로 되돌림	특정 시점의 데이터를 다시 불러옴
시점	폼을 새로 열거나 처음 접근했을 때	수정 중 취소하거나 롤백할 때
기준값	"기본값" 상수나 최초 정의된 값	실제 API에서 받아온 값 (originalData)
예시	setForm(defaultForm)	setForm(originalData)

 

즉, 초기화는 정해진 기본값으로 설정하는 것이고,
원복은 어떤 시점에서의 실제 값으로 되돌리는 것이다.

 

---

 

잘못된 패턴

const defaultForm = {
  name: '',
  email: '',
};

const [form, setForm] = useState(defaultForm);

// ...

const handleCancel = () => {
  setForm(defaultForm); // ← 이게 항상 "되돌리기"는 아님
};

 

처음엔 괜찮아 보여도, 이 방식은 사용자가 수정하다가
"취소" 눌렀을 때 원래 API에서 받아온 데이터로 복원되는 게 아니다.
그냥 빈 값으로 초기화되는 것뿐이다.

 

---

상태를 복사해서 '원본 데이터' 따로 들고 있어야 한다 

const [originalForm, setOriginalForm] = useState({});
const [form, setForm] = useState({});

// API로 데이터 받아올 때
useEffect(() => {
  const fetch = async () => {
    const res = await api.getUser();
    const copy = cloneDeep(res.data);
    setOriginalForm(copy); // 원본 백업
    setForm(copy);         // 수정용 상태
  };

  fetch();
}, []);

 

취소 버튼 눌렀을 때

const handleCancel = () => {
  setForm(cloneDeep(originalForm)); // ← 원복은 originalForm 기준으로
};​

 

초기화 버튼 눌렀을 때

const defaultForm = {
  name: '',
  email: '',
};

const handleReset = () => {
  setForm(defaultForm); // ← 초기화는 기본값 기준으로
};

 

 

초기화 값은 상수로, 원본 값은 동적 데이터로 관리

const DEFAULT_FORM = {
  name: '',
  email: '',
};

const [originalForm, setOriginalForm] = useState({});
const [form, setForm] = useState(DEFAULT_FORM);

이렇게 하면 코드 읽기도 쉬워지고
의도치 않은 값 복사 실수를 방지할 수 있다.

 

 

---

React에서 상태를 관리할 때,
“초기화”와 “원복”은 단어는 비슷하지만 목적과 동작이 다르다.

• 초기화는 말 그대로 ‘빈 값’으로 되돌리는 것
• 원복은 이전 상태(보통 API 응답 값)으로 되돌리는 것

이 둘을 혼동하지 않으려면, 상태를 별도로 분리하고
초기값 상수와 API 기반 원본 값을 각각 관리해주는 것이 좋다.