[React] 함수형 컴포넌트로 구현해 보기

아까 작업을 함수형 컴포넌트로도 똑같이 구현 가능하다.

기존 EventPractice 컴포넌트를 모두 지우고 다음과 같이 작성해보자.

• EventPractice_onKeyPress.jsx

import React, { useState } from 'react';

const EventPractice_onKeyPress = () => {
  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_onKeyPress;

기능이 이전과 같이 잘 작동하는지 확인해보자.

위 코드에서는 e.target.name을 활용하지 않고 onChange 관련 함수 두 개를 따로 만들었다.

인풋이 두 개밖에 없다면 이런 코드도 괜찮지만, 인풋의 개수가 많아질 것 같으면 e.target.name을 활용하는 것이 더 좋을 수 있다.

• 이번엔 useState를 통해 사용하는 상태에 문자열이 아닌 객체를 넣어보자. (코드를 다음과 같이 수정)

import React, { useState } from 'react';
 
const EventPractice_onKeyPress = () => {
  const [form, setForm] = useState({
    username: '',
    message: ''
  });
  const { username, message } = form;
  const onChange = e => {
    const nextForm = {
      ...form, // 기존의 form 내용을 이 자리에 복사한 뒤
      [e.target.name]: e.target.value // 원하는 값을 덮어 씌우기
    };
    setForm(nextForm);
  };
  const onClick = () => {
    alert(username + ': ' + message);
    setForm({
      username: '',
      message: ''
    });
  };
  const onKeyPress = e => {
    if (e.key === 'Enter') {
      onClick();
    }
  };
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="username"
        placeholder="사용자명"
        value={username}
        onChange={onChange}
      />
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요"
        value={message}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};
export default EventPractice_onKeyPress;

코드를 저장하고 기능이 잘 작동하는지 확인해보자.

e.target.name 값을 활용하려면, 위와 같이 useState를 쓸 때 인풋 값들이 들어 있는 form 객체를 사용하면된다.