<step64>'react_event, ref'

1) 

App.js

import logo from './logo.svg';
import './App.css';
import EventInputClass from './Components/EventInputClass';
import EventInput from './Components/EventInput';
import RefClassSample from './Components/RefClassSample';
import RefInput from './Components/RefInput';

function App() {
  return (
    <div className="App">
      {/* <EventInputClass></EventInputClass> */}
      <EventInput></EventInput>
      {/* <RefClassSample></RefClassSample> */}
      {/* <RefInput></RefInput> */}
    </div>
  );
}

export default App;

EventInput.js

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

const EventInput = () => {
    const input = useRef();
    const [form, setForm] = useState({
        username: '',
        message: '',
    })
    const { username, message } = form;
    const onChange = (e) => {
        // const nextForm = {
        //     ...form,  //기존의 form 내용을 여기에 복사
        //     [e.target.name]: e.target.value,  //원하는 값은 덮어 씌우기
        // }
        const {name, value} = e.target;
        setForm({
            ...form,
            [name]: value,
        });
    }
    //버튼 클릭시 함수 발생
    const onClick = () => {
        console.log(`메세지는 ${message}이고 유저네임은 ${username}입니다.`);
        setForm({
            username: '',
            message: '',
        });
        input.current.focus();
    }
    const onKeyPress = (e) => {
        if(e.key === "Enter"){
            onClick();
        }
    }
    return (
        <div>
            <h1>이벤트 연습</h1>
            <input type="text" ref={input} name='username' value={username} onChange={onChange} onKeyPress={onKeyPress}/>
            <input type="text" ref={input} name='message' value={message} onChange={onChange} onKeyPress={onKeyPress}/>
            <button onClick={onClick}>확인</button>
        </div>
    );
};

export default EventInput;

EventInputClass.js

import React, { Component } from 'react';

class EventInputClass extends Component {
    state = {
        message: '',
        username: '',
    }
    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value, // input이 여러개일 때 name으로 접근
        })
    }
    handleClick = () => {
        console.log(`메세지는 ${this.state.message}이고 유저네임은 ${this.state.username}입니다.`);
        this.setState({
            message: '',
            username: '',
        })
    }
    //키를 누르면 실행되는 함수
    handleKeyPress = (e) => {
        console.log(e);
        if(e.key === "Enter"){
            this.handleClick();
        }
    }
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input type="text" name='message' onChange={this.handleChange} value={this.state.message} onKeyPress={this.handleKeyPress}/>
                <input type="text" name='username' onChange={this.handleChange} value={this.state.username} onKeyPress={this.handleKeyPress}/>
                <button onClick={this.handleClick}>확인</button>
            </div>
        );
    }
}

export default EventInputClass;

RefClassSample.js

import React, { Component } from 'react';
import './RefSample.css';
class RefClassSample extends Component {
    // ref 생성
    input = React.createRef();
    state = {
        password: '',
        clicked: false,
        validated: false,
    }
    handleChange = () => {
        this.setState({
            password: this.input.current.value,
        })
    }
    handleButtonClick = () => {
        this.setState({
            clicked: true,
            validated: this.state.password === '000',
        })
        // DOM 요소 접근은 ref.current
        console.log(this.input)
        this.input.current.focus();
    }
    render() {
        return (
            <div>
                {/* 선택하려는 DOM 요소의 ref 속성으로 지정해줌 */}
                <input
                type = "password"
                ref={this.input}
                value={this.state.password}
                onChange={this.handleChange}
                className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
                />
                <button onClick={this.handleButtonClick}>확인</button>    
            </div>
        );
    }
}

export default RefClassSample;

RefInput.js

import React, { Component } from 'react';

class RefInput extends Component {
    // ref 생성
    input = React.createRef();
    handleFocus = () => {
        this.input.current.focus();
        console.log(this.input.current.value);
    }
    render() {
        return (
            <div>
                <input ref={this.input} onChange={this.handleFocus} />
            </div>
        );
    }
}

export default RefInput;

RefSample.css

.success {
    background-color: lightgreen;
}
.failure {
    background-color: lightcoral;
}