리액트 input 태그 수정 안되는 문제 해결 방법 - value 속성이 원인!

import React, { useState } from "react";

const App = () => {
  const [name, setName] = useState("soo");
  const [age, setAge] = useState(20);

  return (
    <>
      이름 :
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      나이 :
      <input
        type="number"
        value={age}
        onChange={(e) => setAge(e.target.value)}
      />
    </>
  );
};

export default App;

리액트는 input 에 value 속성 값을 지정하면 그 value값이 고정되어 입력 및 수정이 불가능한 문제가 있다. 

이를 해결하기 위해선 위와 같이 useState와 onChange 이벤트를 이용해 해결 할 수 있다.