[React] input

 

 

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

function App() {

  let [userInput, userInputChange] = useState('');


  return (
    <div className="App">
    
    <input onChange={ (e)=>{ userInputChange(e.target.value) } }/>
	
    {userInput}
    
    </div>
  );
}


export default App;

• 위와 같은 코드를 작성할 때 userInput변수에 입력된 값을 받아 변경하고 그 값을 출력할 수 있다.
• e.target.value의 쓰임을 잘 알아두자

 

 

 

---

 

 

// eslint-disable-next-line
import React, { useState } from 'react';
import './App.css';

function App() {

  let [a, aChange] = useState(['state1', 'state2', 'state3']);
  let [num, numChange] = useState([0 ,0 ,0]);

  let [userInput, userInputChange] = useState('');

  function change(clickNum){
    var tmp=[...num];
    tmp[clickNum]++;
    numChange(tmp);
  }

  return (
    <div className="App">


      {
        a.map(function(i, n){
          return <div className="list" key={n}>
            <h1> { i } <span onClick={ ()=>{change(n)} }>❤</span> { num[n] } </h1>
            </div>
        })

      }
    
    <hr/>
    
    <div>
      <input onChange={ (e)=>{ userInputChange(e.target.value) } }/>
      <button onClick={ ()=> {
        var tmp = [...a];
        tmp.unshift(userInput);
        aChange(tmp);
        num.unshift(0);
         } }> 저장하기 </button>
    </div>


    </div>
  );
}


export default App;

 

 

• unshift기능을 쓰면 state배열의 0번째에 값이 삽입된다.
• 값을 변경할때는 항상 카피본을 만들고 변경함수(카피본) 방식으로 해야 한다.