4.3 함수형 컴포넌트로 구현해 보기

    방금 우리가 했던 작업을 함수형 컴포넌트로도 똑같이 구현할 수 있습니다. 기존 EventPractice 컴포넌트를 모두 지우고 다음과 같이 작성해 보세요.

    EventPractice.js

    import React, { useState } from 'react';
     
    const EventPractice = () => {
      const [username, setUsername] = useState('');
      const [message, setMessage] = useState('');
      const onChangeUsername = e => setUsername(e.target.value);
      const onChangeMessage = e => setMessage(e.target.value);
      const onClick = () => {
        alert(username + ': ' + message);
        setUsername('');
        setMessage('');
      };
      const onKeyPress = e => {
        if (e.key === 'Enter') {
          onClick();
        }
      };
      return (
        <div>
          <h1>이벤트 연습</h1>
          <input
            type="text"
            name="username"
            placeholder="사용자"
            value={username}
            onChange={onChangeUsername}
          />
          <input
            type="text"
            name="message"
            placeholder="아무거나 입력해 보세요"
            value={message}
            onChange={onChangeMessage}
            onKeyPress={onKeyPress}
          />
          <button onClick={onClick}>확인</button>
        </div>
      );
    };
    export default EventPractice;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.