React 활용 - 3 : useState, input 사용하여 데이터 입력하기

이번에는 react 의 useState를 input 과 함께 활용하여 데이터 입력을 해보도록 하겠다.

 

우선 작업 페이지 TextData.js 를 아래와 같이 생성 후 메뉴에 추가한다.

 

import React from 'react';

function TextData() {
  
    return (
        <div>
            TextData
            <div>
                data1: <input ></input>
            </div>
            <div>
                data2: <input></input>
            </div>
            <div>
                <button>Send</button>
            </div>
        </div>
    );
  }
export default TextData;

 

이제 TextData.js 에서 data1, data2 두개의 데이터를 받을 state를 useState로 선언한다.

 

import React, { useState } from 'react';

function TextData() {
  const [data1, setData1] = useState('');
  const [data2, setData2] = useState('');
  

    return (
        <div>
            TextData
            <div>
                data1: <input></input>
            </div>
            <div>
                data2: <input></input>
            </div>
            <div>
                <button>Send</button>
            </div>
        </div>
    );
  }
export default TextData;

setData1 ,  setData2 를 이용해서 data1, data2의 값을 넣어 줄 수 있다.

 

리액트는 Usestate를 통해 변경되는 부분의 데이터만 렌더링 해준다.

 

아래와 같이 작성하여 input에 입력 시 data1, data2의 값이 입력되게 해준다.

 

import React, { useState, useEffect } from 'react';

function TextData() {
  const [data1, setData1] = useState('');
  const [data2, setData2] = useState('');
  
  const updateData1 = e => setData1(e.target.value);
  const updateData2 = e => setData2(e.target.value);

  function Send(){
    console.log(data1)
    console.log(data2)
  }
    return (
        <div>
            TextData
            <div>
                data1: <input  onChange={updateData1}></input>
            </div>
            <div>
                data2: <input  onChange={updateData2}></input>
            </div>
            <div>
                <button onClick={()=> Send()}>Send</button>
            </div>
        </div>
    );
  }
export default TextData;

 

 

위 코드 작성 후 화면에서 send를 눌러본다.

 

각 input에서 입력한 값이 state에 정상적으로 저장되었다.

 

해당 값은 input 값이 변경 시 실시간으로 화면에 렌더링이 되어 아래와 같이 활용 가능하다.

 

import React, { useState, useEffect } from 'react';

function TextData() {
  const [data1, setData1] = useState('');
  const [data2, setData2] = useState('');
  
  const updateData1 = e => setData1(e.target.value);
  const updateData2 = e => setData2(e.target.value);

  function Send(){
    console.log(data1)
    console.log(data2)
  }
    return (
        <div>
            TextData
            <div>
                data1: <input  onChange={updateData1}></input>
            </div>
            <div>
                data1Render: {data1}
            </div>
            <div>
                data2: <input  onChange={updateData2}></input>
            </div>
            <div>
                data2Render: {data2}
            </div>
            <div>
                <button onClick={()=> Send()}>Send</button>
            </div>
        </div>
    );
  }
export default TextData;

위와 같이 작성하면 input 값 변경 시 변경된 state값이 화면에 렌더링 된다.

 

https://youtu.be/vsu3hH4nOGE

 

 

 

 

 

 

소스코드 보기