React 클래스형, 함수형

App.js

import './App.css';
import Counter from './Counter';
import InputSample from './InputSample';
import InputTest from './InputTest';
import Parent from './Parent';
import Say from './Say';

function App() {
  return (
    <div>
    <InputSample/><hr/>
    <InputTest/><hr/>
    <Say/><hr/>
    <Counter/><hr/>
    <Parent/>
    </div>
  );
}

export default App;

 

InputSample.js

 

import React, {useState} from "react";
const InputSample = () =>{
    // const[name, setName] = useState('')
    // const[nickname, setNickname] = useState('')
    // const[phone, setPhone] = useState('')
    // const onChangeName =(e)=>{
    //     setName(e.target.value);
    // }
    // const onChangeNickname =(e)=>{
    //     setNickname(e.target.value);
    // }
    // const onChangePhone =(e)=>{
    //     setPhone(e.target.value);
    // }
    // const onReset =()=>{
    //     setName(''); setNickname(''); setPhone('');
    // }

    const [inputs, setInputs] = useState({
        name :'',
        nickname : '',
        phone : ''
    })

    const onChange = (e) =>{
        setInputs({
            ...inputs,
            [e.target.name] : e.target.value
        })
    }

    const {name,nickname,phone} = inputs

    const onReset =()=>{
        setInputs({
            name: '',
            nickname: '',
            phone : ''
        })
    }

    return(
        <div>
            <input name="name" placeholder="이름" onChange={onChange} value={name}/>
            <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
            <input name="phone" placeholder="전화번호"onChange={onChange} value={phone}/>
            <button onClick={onReset}>초기화</button>
            <div>
                    <b>소개 :</b>
                    {name}  // {nickname} // {phone}
            </div>
        </div>
    )

}
export default InputSample;

 

InputTest.js

 

//함수형
import React, {Component,useState} from "react";
// const InputTest = () =>{
    
//     const [text, setText] = useState({
//         content : ''
//     })

//     const onChange = (e)=>{
//         setText({
//             ...text,
//             [e.target.name] : e.target.value
//         })
//     }

//     const {content} = text

//     const onReset =()=>{
//         setText({
//             content: ''
//         })
//     }

// return(
//     <div>
//         <input name="content" onChange={onChange} value={content}/>
//         <button onClick={onReset}>초기화</button>
//         <div>
//             <b>내용 :</b>
//             {content}
//         </div>
//     </div>

//     )
// }


//클래스형 (위의 함수형이랑 같은 내용)
class InputTest extends Component{
    state ={
        text: ''
    }

    textChange = (e) =>{
        this.setState({
            text : e.target.value
        })
    }

    onReset = ()=>{
        this.setState({
            text : ''
        })
    }

    render(){
        return(
            <div>
                <input type="content" onChange={this.textChange} value={this.state.text}/>
                <button onClick={this.onReset}>초기화</button>
                <div>
                    <b>내용 : </b>
                    {this.state.text}
                </div>
            </div>
        )
    }

} 

export default InputTest;