input 값을 state 로 관리하는 이유

인프런 파이어베이스 강의를 듣고 정리한 내용입니다. 파이어베이스 강의지만 리액트 기반으로 진행해 리액트 관련 개념도 배울 수 있습니다. 더 자세하고 친절한 설명은 해당 강의를 참고하세요.

신뢰 가능한 단일 출처라는 리액트 설계 철학에 맞춰 form 을 통해 받은 데이터를 useState 로 관리합니다. input 요소안의 값을 바꾸는 방법은 다양하지만 (사용자가 UI 에 입력하거나 input 의 DOM 에 접근해 value 를 변경하거나..) state 를 input 의 value 값과 연결하면 input 의 값은 오직 state만 변경 가능합니다.

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

..

<input 
  type="email"
  id="myEmail"
  required 
  onChange={handleData}
  value={email} // staet 로 연결
/>
<input
  type="password"
  id="myPassWord"
  required
  onChange={handleData}
  value={password} // state 로 연결
/>

이렇게 연결하면 onChange 로 연결한 handleData 함수로 state 를 바꾸지 않는 한 input 창에 데이터 입려이 안됩니다. 아래처럼 함수까지 연결해야 세터함수로 state 값을 변경해 해당 값이 입력됩니다.

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

const handleData = (event) => {
  if (event.target.type === "email") { // 타입 확인하고 
    setEmail(event.target.value); // 해당 값 입력
  } else if (event.target.type === "password") {
    setPassword(event.target.value);
  }
};

..

<input 
  type="email"
  id="myEmail"
  required 
  onChange={handleData}
  value={email} // staet 로 연결
/>
<input
  type="password"
  id="myPassWord"
  required
  onChange={handleData}
  value={password} // state 로 연결
/>

이렇게 input 에 서 입력 받는 값을 state 로 연결해 세터함수로만 수정 가능하게 한정함으로서 UI 가 사용자와 인터랙션 하는 방법을 리액트에 독점적으로 맡긴다고 볼 수 있습니다.

input 태그를 감싸는 form 태그에 onSubmit 으로 함수를 연결했을 때 event.preventDefault() 로 form 태그의 기본 동작을 막아주는 것도 비슷한 맥락이 있습니다. UI가 원래 가지고 있는 기능을 중지하고 새로 코드를 입혀 우리가 원하는 방향으로 조작하는 것입니다.