[React] form 제출 후 input 초기화

붕붕·2025년 1월 22일

form을 제출하고 input을 기본값으로 초기화하는 과정에 대해 작성해보았다.

초기 코드

// 기본값 설정
const [addRegion, setAddRegion] = useState({
  region: "",
  goldMedal: 0,
  silverMedal: 0,
  bronzeMedal: 0,
});

const [region, setRegions] = useState([
  ...JSON.parse(localStorage.getItem("list")),
]);


const MedalForm = ({ addRegion, region, setRegions, setAddRegion }) => {
  const handleForm = (e) => {
    e.preventDefault();
    const action = e.nativeEvent.submitter.name;

    if (action === "addRegion") {
    	// 로직 처리..
      isInclude || setRegions([...region, addRegion]);
    } else if (action === "updateRegion") {
		// 로직 처리..
      setRegions([...updateRegion]);
    }
 };

이렇게 총 4개의 input이 있고, 버튼을 눌러 form을 제출하면 버튼 종류에 따라 다른 로직이 실행된다.
addRegion은 input에서 받아오는 값이고, region은 addRegion 객체들이 들어 있는 배열이다.

초기값 설정을 위한 시도

초기값을 설정하기 위해서 여러가지 방법을 시도해보았다.
placeholder나 value 속성 조정을 해보았다. 나는 state에서 초기값을 설정하는 대신 input 태그의 내부 속성을 변경하는 방식으로 해결하려고 했다.

그러나 찾아보니 폼을 제출한 후 state 값을 초기값으로 다시 설정해주면 해결된다는 것을 알게 되었다.

여기서 두 번째 문제는 검색해봤을 때 예제에서 각각의 변수마다 개별적으로 state를 설정해주었다는 점이다. 예를 들어, region, goldMedal, silverMedal, bronzeMedal 각각의 state를 만들어 초기값을 "", 0, 0, 0으로 설정하는 방식이다.

하지만 나는 모든 값을 하나의 객체로 관리했기 때문에 어떻게 초기값을 설정해야 할지 고민이 되었다.

해결 방법

튜터님께 질문해 본 결과, addRegion 자체의 초기값을 활용하는 방법을 알게 되었다.

내가 작성한 코드에서 이미 초기값을 설정해두었다.

const [addRegion, setAddRegion] = useState({
  region: "",
  goldMedal: 0,
  silverMedal: 0,
  bronzeMedal: 0,
});

결국 폼을 제출한 후 맨 마지막에 addRegion의 상태를 다시 초기값으로 원상복구해주면 되는 것이었다.

최종 코드

const MedalForm = ({ addRegion, region, setRegions, setAddRegion }) => {
  const handleForm = (e) => {
	// 기존 로직...
    
    // 초기화
    setAddRegion({
      region: "",
      goldMedal: 0,
      silverMedal: 0,
      bronzeMedal: 0,
    });
 };