[React] input 입력 안될 때 확인해야 할 것들

리액트로 input으로 구성된 테이블을 만들다가 input창에 입력이 안되는 문제가 발생했다.

첫번째 시도: <thead>, <tbody>

콘솔에서 다음과 같은 오류 메세지가 떴다.

<tr> cannot appear as a child of <table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.

알고보니 리액트에서 <th>와 <td>를 사용할 때 반드시 <thead>와 <tbody> 태그로 감싸주어야 한다고 한다. 그래서 아래와 방식으로 코드를 수정했다.

<table>
	<thead>
		<tr>
			<th>국가명</th>
        </tr>
	</thead>
    <tbody>
		<tr>
			<td>
				<input
                 type="text"
                 placeholder="국가 입력"
                 value={region.region || ""}
                 onChange={handleChange}
                 autoFocus
                 />
            </td>
        </tr>
   </tbody>
</table>

오류 메세지는 사라졌지만 여전히 input창에 값 입력이 되지 않았다..

두번째 시도: 핸들러 동작 확인

문제의 원인을 파악하기 위해 onChange 핸들러가 제대로 동작하는지 확인해보았다. 확인을 위해 콘솔에 출력을 해보았다.

const handleChange = (e) => {
  console.log(e.target.value);
    setRegion({
      ...region,
      [e.target.name]: e.target.value,
    });
 };

콘솔을 확인해보니 콘솔은 제대로 출력되고 있었다. 그렇다면 콘솔 이후의 로직에서 문제가 발생하고 있다고 판단하였다. 그래서 코드를 살펴보니 input에서 name 속성을 설정하지 않아서 업데이트가 안되고 있던 것이었다..

그래서 input 태그에서 name을 설정해주고 코드를 수정하였다.

<input type="text" name="region" placeholder="국가 입력" value={region.region || ""} onChange={handleChange} autoFocus />

이렇게 수정하니 input창에 입력이 제대로 되는 것을 확인하였다!!

결론

디버깅 습관의 중요성을 다시 한번 깨달았다.. 그리고 input 태그의 필수 속성을 꼭 확인하자🥹