React에서 input 입력이 안되는 결정적인 이유

1. 안되는 이유와 , ChatGPT의 답변

ChatGPT의 답변은 다음과 같다.

React에서 input 태그의 value 속성에 상태값을 넣으면, 그 값은 읽기 전용 상태가 되어 변경할 수 없습니다. 대신, onChange 이벤트 핸들러를 사용하여 입력 값을 변경해야 합니다.
이유는 React에서는 단방향 데이터 흐름을 사용하여 컴포넌트의 상태를 업데이트하고 렌더링하는 방식으로 작동하기 때문입니다. 그래서 input 태그의 value 값이 변경되면 React는 이를 새로운 상태로 인식하고, 이에 따라 컴포넌트를 다시 렌더링합니다. 그러나 value 값이 읽기 전용이기 때문에 이를 변경할 수 없으므로, onChange 이벤트 핸들러를 사용하여 상태를 업데이트하고 새로운 값을 입력하는 것이 필요합니다.

 

간단하게 말하면 "input의 value로 상태값을 쓰니까 안되지!! 되게 하고싶으면 onChange를 이용해" 이거다

 

⭐️ 여기서 중요히 생각해야하는건 왜 읽기 전용이 되고, 왜 하필이면 onChange핸들러를 사용해야 할까이다.

이유를 알아보기위해 다음 개념을 보자.

 

참고로 인풋에 입력을 위한 코드는 다음과 같다.

const [상태값, 상태값 조정 함수] = React.useState(초기상태값);

function onChange() {
  상태값 조정 함수();
}

<input name="name" onChange={onChange} value={상태값}/>

 

---

데이터 바인딩과 단방향 데이터 바인딩

먼저 데이터 바인딩이란 개념에 대해 알아보자.

 

제공자(개발자)와 사용자(유저)가 접하는 데이터를 동일하게 묶는 기법을 말한다.

 

자바스크립트 상에서 선언 및 반환한 데이터를 HTML상에서도 동일하게 볼 수 있게끔 하는 것이다.

 

그러면 단방향 데이터 바인딩이란?

컴포넌트 내에서 '단방향 데이터 바인딩'은 JS에서 HTML로 한 방향으로만 데이터를 동기화하는 것을 의미한다.

 

때문에 역으로 HTML에서 JS로의 직접적인 데이터 갱신은 불가능하다.

 

HTML에서 JS로의 데이터 갱신을 원한다면, 이벤트함수(eventListener)를 써야한다.

 

---

결론

js의 동작 방식과 useState의 특징을 알면 결론은 간단하다.

 

작동이 안되는 핵심은 input의 value를 상태값으로 설정한대에서 있다.

 

사용자가 HTML에서 input태그에 무언갈 작성하면, value는 수시로 사용자의 입력을 보고 변화한다.

 

그런데 value가 변화되면 JS의 상태값이 변해야하는건데,

 

이는 JS -> HTML 단방향 흐름에 어긋난다.

 

따라서 이벤트함수를 통해 value변경에 따른 상태값수정을 해줘야하는 것이다.

 

input의 value는 사용자의 입력에 따라 바로바로 바뀌기 때문에 onChange 이벤트함수를 쓸 수 밖에 없는 이유다.