[Blog-project] input데이터

🚀 input : 사용자가 입력한 글을 변수에 저장하는 법

실제 사이트엔 <form>, <input> 을 빈번히 사용한다. 여기에 입력된 값을 저장하거나 어디로 보내거나 그래야할 경우가 많은데, react에서 input 데이터는 자바스크립트와 똑같이 처리한다.

🍎 input으로 받은 데이터 활용 방법
1) input 데이터를 저장할 state만들기 (빈 state ➡ 아직 input값을 입력하기 전이기 때문)
2) input에 event를 달 수 있는 onChange 이벤트 핸들러 적용
3) event를 통해 받는 input값은 e.target.value이다. 이 값을 state변경함수에 담는다
(초기값은 빈 문자열이고, 변경(대체)된 값은 input에 입력한 값이 되는 꼴)

🐣 input 사용 예제

function App (){

  let [입력값, 입력값변경함수] = useState('');

  return (
    <div>
      <input onChange={ (e)=>{ 입력값변경함수(e.target.value) } } />
       // 입력값변경함수(=state변경함수)에 대체할 데이터를 저장하는데, 
       // 대체할 데이터는 input의 value를 저장하는것.
    </div>
  )
}

❗ e.target.value 를 통해 input의 value를 확인할 수 있다.
<input>뿐만 아니라 <textarea>, <select> 이런 태그들에도 똑같이 사용가능!!!!!!!

🐣 input 활용 예제

button을 누르면, input에 적은 값(value)이 UI로 보여질 수 있도록 기능 구현하기

function App (){

  let [title, setTitle] = useState(['홍대 맛집', '미생 드라마', '감딱딱']
  let [입력값, 입력값변경함수] = useState('');

  return (
    <div className="publish">

      <input onChange={ (e)=>{ 입력값변경함수(e.target.value) } } />
      // input에 저장한 값은 모두 "입력값변경함수" 안에 저장됨

      <button onClick={ () => {
      	  let arrayCopy = [...title];   // title state 복사해오기
          arrayCopy.unshift(입력값);     // title에 맨앞에 input state 담기
          setTitle( arrayCopy )         // title 변경함수에 넣기
      }> 저장 </button>
    </div>
  )
}

❗ 기존 state값을 변경하려면 (1) state값 복사해오기 (2) 값 수정하기 (3) 변경함수에 넣기

💡 글 발행 기능 원리
1) input의 기본 state값은 ' '이다. input에 어떠한 값을 쓰면 입력값변경함수안에 저장된다.
2) 버튼에 onChange event를 붙였다. 즉, 버튼을 누르면 input에 새로 저장한 값(기존 state에서 대체된 값)이 unshift된다
3) 따라서 버튼에 onChange되면 실행될 함수 안에는

• (1) title state배열 복사(deepcopy) ➡
• (2) 복사된 state에서 맨 앞에 새로운 input값을 추가해주려면 unshift를 활용하기 ➡
• (3) 맨 앞에 담을 값은 대체된 state값이다. 따라서 입력값을 넣어주어야 한다(입력값변경함수를 넣어주는 것이 아니다.)

❗ 입력값변경함수는 이미 input에 값을 쓸때 해당 값이 저장되는 용도로 쓰인다. 저장되고나면 state값은 이미 바뀐셈