1. input값 기본

<사용자가 input에 입력한 데이터를 state로 저장하는 법>

• 사용자가 input에 입력한 데이터는 state 저장해서 쓰는게 일반적이다.

  ex) 사용자가 input에 저장한 데이터를 state에 저장한다.

1. 빈 state가 하나가 필요할테니 state를 하나 만든다.

   function App (){
   
     let [입력값, 입력값변경] = useState('');
   
     return (
       <div>
       </div>
     )
   }
   

   • 초기값은 따옴표 두개로 빈 문자열을 입력해주면 되겠습니다.

2. 사용자가 input에 입력한 값 받아 온다.

<input onChange={ (e)=>{ console.log(e.target.value) } } />

• onChange: input에 무언가 입력할 때마다 특정 함수를 동작시키고 싶을 때 사용한다.
• e.target: 지금 이벤트가 동작하는 HTML요소한다.
• .value: input등에 입력한 값을 의미한다.
• <input>뿐만 아니라 <textarea>, <select> 이런 태그들에도 똑같이 사용가능합니다.
• 주의) 반드시 input태그를 닫아주어야 한다.

1. input에 입력된 값을 state에 저장한다.

   function App (){
   
     let [입력값, 입력값변경] = useState('');
   
     return (
       <div>
         <input onChange={ (e)=>{ 입력값변경(e.target.value) } />
       </div>
     )
   }
   

2. input값 응용

ex) input에 글 적고 저장버튼 누르면 게시물이 추가되도록 한다. (단, 서버가 없기 때문에 영주저장은 불가하다)

1. input의 HTML, CSS 코딩하기

function App (){
  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  return (
    <div>
      <div className="publish">
        <input />
        <button>저장</button>
      </div>
    </div>
  )
}

.publish {
  margin-top : 30px;
  margin-bottom : 30px;
}
.publish input {
  padding : 10px;
  font-size : 16px;
  border-radius : 5px;
  width : 80%;
  border : 1px solid grey;
}
.publish button {
  display : block;
  margin : auto;
  margin-top : 10px;
}

1. 저장버튼을 누르면 [글제목]이라는 state에 input 값을 추가한다.

   • 리액트에선 state를 변경하면 map이 HTML도 변경(재렌더링) 해준다.

   2- 1. input에 입력한 값을 변수나 state로 저장한다.

   function App (){
     let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
     let [입력값, 입력값변경] = useState('');
     return (
       <div>
         HTML 잔뜩 있는 곳
         <div className="publish">
           <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
           <button>저장</button>
         </div>
       </div>
     )
   }
   

   2- 2. 버튼을 누르면 입력값 state를 글제목state에 추가한다.

   function App (){
     let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
     let [입력값, 입력값변경] = useState('');
     return (
       <div>
         <div className="publish">
           <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
           <button onClick={ ()=>{
   
             let arrayCopy = [...글제목];
             arrayCopy.unshift(입력값);
             글제목변경( arrayCopy )
   
            }}>저장</button>
         </div>
       </div>
     )
   }
   

   • state를 직접 수정하는 것을 지양하기 때문에 글제목을 복사한 카피본을 하나 만들고, 수정하여(unshift, push) 새로운 글제목 state가 되도록 입력한 것이다.