[JavaScript] React - useState를 사용한 input 관리

React

<input>을 만들고 input의 value값을 받아와 출력해주는 것은 만들어 보려고 합니다.

     <INPUT>		// input값에 써진 내용을 
(INPUT.VALUE 출력)       // 여기에 출력

useState를 사용하여 input 상태 관리 (input이 1개)

import React from 'react';			//<App.js>
import InputSample from './InputSample';

function App() {
  return (
    <div>
      <InputSample />
    </div>
  );
}
export default App;

import React, { useState } from 'react'  //useState를 사용하기 위하여 import

function InputSample() {
   //text : 현재값 / setText: 변경할 값 / useState({초기값})
    const [text, setText] = useState('')  

    const onChange = (e) => {
    	console.log(e.target)		//이벤트가 발생한 타겟의 요소를 출력
        console.log(e.target.value)	//이벤트가 발생한 타겟의 Value를 출력
    	setText(e.target.value)		//이벤트 발생한 value값으로 {text} 변경
}

const onReset = () => {			
    setText("")			     // onClick함수 발생시 ''으로 {text} 변경
}

useState를 사용하여 input 상태 관리 (input이 여러개 --> 객체)

input이 여러개일 경우에는 해당 값들을 객체 형태로 만들어 관리하게됩니다.
객체로 묶고, useState를 사용하여 각 input 상태를 관리해보도록 합시다!

   <input name="name">		
   <input name="nickname">	
  // 각 input의 name attributes를 가져와 name에, nickname의 value값을 nickname에 출력
     name : (nickname)           

import React from 'react';			//<App.js>
import InputSample1 from './InputSample1';

function App() {
  return (
    <div>
      <InputSample1 />
    </div>
  );
}
export default App;

    //useState를 사용하기 위하여 import
import React, { useState } from 'react'  

function InputSample1() {
    //갹채를 업데이트하기위해 useState안에 객체를 사용
    const [inputs, setInputs] = useState({  
        name: '',
        nickname: '',
    })
    //값을 가져오기 위해 inputs에 name으로 가져왔다
    const { name, nickname } = inputs   

    const onChange = (e) => {
       //input에 name을 가진 요소의 value에 이벤트를 걸었다
    const { name, value } = e.target   

   // 변수를 만들어 이벤트가 발생했을때의 value를 넣어줬다
    const nextInputs = {            
   //스프레드 문법으로 기존의 객체를 복사한다.
            ...inputs,  
            [name]: value,
        }
   //만든 변수를 seInput으로 변경해준다.
        setInputs(nextInputs)       

    }
   //안의 값을 초기화하는 객체를 변수에 넣었다
    const onReset = () => {
        const resetInputs = {       
            name: '',
            nickname: '',
        }
   //초기화 객체값을 넣은 변수로 변경하도록 셋인풋 실행
        setInputs(resetInputs)      
    }

    return (
        <div>
            <input         
                name="name"      //위에서 name의 값을 가져와 타겟을 가져온다.
                placeholder="이름"
                onChange={onChange}
                value={name}     //가져온 타겟의 벨류값을 변경할때 사용한다.
            />
            <input
                name="nickname"  //위에서 nickname의 값을 가져와 타겟을 가져온다.
                placeholder="닉네임"
                onChange={onChange}
                value={nickname} //가져온 타겟의 벨류값을 변경할때 사용한다.
            />
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값 : </b>
                {name}:({nickname})
            </div>
        </div>
    )
}

export default InputSample1