Study Web Development

4월 7일

이전으로

React

이벤트

1. 새 리액트 앱 ch10-event 생성하고 구동
2. VSC에서 폴더 열기-ch10-event 선택하고 src 폴더에 새 파일 EventPractice.js 생성

import React, {Component} from "react";

class EventPractice extends Component {
    // state 추가
    state = {
        message: ''
    }

    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                {/* JSX에서는 input, br처럼 원래 단독 태그인 HTML 태그들도 시작과 끝을 명시해야 함 */}
                {/* input 태그에서 입력된 값이 변화하면 state의 값에 반영 */}
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력해보세요"
                    value={this.state.message}
                    onChange={(e) => {
                        this.setState({message:e.target.value});
                    }}
                />
                {/* 현재 state 값을 alert으로 보여준 후 초기화 */}
                <button
                    onClick={() => {
                        alert(this.state.message);
                        this.setState({message:''});
                    }}
                >확인</button>
            </div>
        );
    }
}

export default EventPractice;

3. App.js를 다음처럼 수정

import React from "react";
import EventPractice from "./EventPractice";

function App() {
  return <EventPractice/>;
}

export default App;

4. 새 리액트 앱 ch11-event 생성하고 구동
5. VSC에서 폴더 열기-ch11-event 선택하고 src 폴더에 새 파일 EventPractice.js 생성

import React, {Component} from "react";

class EventPractice extends Component {
    state = {
        message: ''
    }

    // 이벤트 핸들러; 화살표 함수 형태로 메서드 정의
    handleChange = (e) => {
        this.setState({
            message: e.target.value
        });
    }

    handleClick = () => {
        alert(this.state.message);
        this.setState({
            message: ''
        });
    }

    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력하세요"
                    value={this.state.message}
                    onChange={this.handleChange}
                />
                <button onClick={this.handleClick}>확인</button>
            </div>
        );
    }
}

export default EventPractice;

6. App.js를 다음처럼 수정

import React from "react";
import EventPractice from "./EventPractice";

function App() {
  return <EventPractice/>;
}

export default App;

7. 새 리액트 앱 ch12-event 생성하고 구동
8. VSC에서 폴더 열기-ch12-event 선택하고 src 폴더에 새 파일 EventPractice.js 생성

import React, {Component} from "react";

class EventPractice extends Component {
    state = {
        username: '',
        message:''
    }

    // 이벤트 핸들러 정의
    handleChange = (e) => {
        this.setState({
            // 객체 안에서 key를 []로 감싸면 그 안에 넣은 레퍼런스의 실제 값이 key 값으로 사용됨
            [e.target.name]:e.target.value
        });
    }

    handleClick = () => {
        alert(this.state.username + ':' + this.state.message);
        this.setState({
            username:'',
            message:''
        });
    }

    // enter 키 입력시 동작
    handleKeyPress = (e) => {
        if(e.key === 'Enter') {
            this.handleClick();
        }
    }

    render() {
        const {username, message} = this.state;

        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="username"
                    placeholder="사용자명"
                    value={username}
                    onChange={this.handleChange}
                />
                <input
                    type="text"
                    name="message"
                    placeholder="메시지"
                    value={message}
                    onChange={this.handleChange}
                    onKeyDown={this.handleKeyPress}
                />
                <button onClick={this.handleClick}>확인</button>
            </div>
        );
    }
}

export default EventPractice;

9. App.js를 다음처럼 수정

import React from "react";
import EventPractice from "./EventPractice";

function App() {
  return <EventPractice/>;
}

export default App;

다음으로