input 태그

input 페이지 넘어가면서 수정 처리

싱글 페이지 애플리케이션 → 수정 눌렀을때 페이지 이동 X

onChange 이용해 값 수정해 줌. (e.target.value)

import React, {useState} from 'react';
import './App.css';

const App = () => {

  const [text, setText] = useState("11");
  const [edit, setEdit] = useState(false);

  let content = <div>
                  {text} 
                  <button onClick={() => setEdit(true) }> 수정 </button>
                </div>

  if(edit){
    content = 
    <div>
      <input type="text" 
            value={text}
            onChange={(e) => {
              console.log(e.target.value);
              setText(e.target.value);
            }} />
      <button onClick={() => setEdit(false)}> 수정 완료 </button>
    </div>
  }

  return(
    <>
      {content}
    </>
  );
}

export default App;

참고 영상

https://www.youtube.com/watch?v=4Xrhhy5BfMA