[React] React 기초 실습

import React, {useState} from 'react';

//이름과 직업이 들어가는 input 태그에 데이터를 입력
//이름을 입력 후 커서가 바뀌면 아래 span태그에 입력한 이름 출력
//직업을 입력하는 동시에 아래 span태그에 입력하고 있는 직업 출력

const FuncStateExample2 = () => {
    const[name, setName] = useState("");
    const[job, setJob] = useState("");
    
    const changeName = (e) =>{
        setName(e.target.value);
    }

    const changeJob = (e) =>{
        setJob(e.target.value);
    }

    return (
        <div>
            <input onBlur={changeName}/><br/>
            <input onChange={changeJob}/><br/>

            이름 : <span>{name}</span><br />
            직업 : <span>{job}</span>
        </div>
    );
};

export default FuncStateExample2;

input에 값 넣고 출력

import React, {useState} from 'react';
//textFiled에 값을 입력하고 값 전달 버튼을 누르면
// h1태그에 값이 들어가게하고
// 값 삭제 버튼을 누르면 h1태그에 값이 비어잇게하기

const Prac_Input = () => {
    const [data, setData] = useState("값 입력 후 버튼을 눌러주세요");
    const [value, setValue] = useState("");
   
    return (
        <div>
            <h1>{data}</h1>
            <input onChange={e => setValue(e.target.value)}/><br/>
            <button onClick={() => setData(value)}>값 전달</button>&nbsp;
            <button onClick={() => setData('')}>값 삭제</button>
        </div>
    );
};

export default Prac_Input;