3-4. input 여러개 다루기

input값 여러개 다루기(state여러개 생성하기)

저희는 input값을 state에 넣는 방법을 배웠습니다.

그렇다면 input이 여러개 일때는 어떻게 해야할까요?

메서드를 여러 개 만들어야 할까요?

사용자명을 뜻하는 input값을 하나 더 만들어 봅시다.

그것을 통해 사용자명: 메세지를 알림으로 출력해보겠습니다.

// EventPractice.js
import React, { Component } from "react";

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

  handleChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    });
    console.log({[e.target.name]: e.target.value});
  };

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

  render() {
    return (
      <div>
        <h1>이벤트 연습!</h1>
        <input
            type="text"
            name="username"
            placeholder="사용자명"
            value={this.state.username}
            onChange={this.handleChange}
        />
        <br/>
        <input
          type="text"
          name="message"
          placeholder="메세지를 입력해보세요"
          value={this.state.message}
          onChange={this.handleChange}
        />
        <br/>
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}

export default EventPractice;

이 코드에서 핵심은[e.target.name]: e.target.value
입니다.

객체 안에서 key를 [ ] 로 감싸면

그 안에 넣은 레퍼런스가 가리키는 실제 값이 key값으로 사용됩니다.

[e.target.name] : e.target.value

이벤트를 실행시킨 대상의 name으로 대상을 특정하고 value값을 출력합니다.
이경우엔 input의 name, 즉 username / message 두개가 됩니다

⇒ input안에 name의 속성(properties)을 정해줬기 때문입니다.

onKeyPress 이벤트 핸들링

이번엔 키를 눌렀을 때 발생하는 KeyPress이벤트를 처리하는 방법을 알아보겠습니다.

import React, { Component } from "react";

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

  handleChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    });
    console.log({[e.target.name]: e.target.value});
  };

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

  handleKeyPress = (e) => {
    if(e.key ==='Enter') {
        this.handleClick();
    }
  }
  render() {
    return (
      <div>
        <h1>이벤트 연습!</h1>
        <input
            type="text"
            name="username"
            placeholder="사용자명"
            value={this.state.username}
            onChange={this.handleChange}
        />
        <br/>
        <input
          type="text"
          name="message"
          placeholder="메세지를 입력해보세요"
          value={this.state.message}
          onChange={this.handleChange}
          onKeyPress={this.handleKeyPress}
        />
        <br/>
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}

export default EventPractice;

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

지금까지 저희가 만든 클래스형 컴포넌트를 함수형 컴포넌트로 똑같이 구현할 수 있습니다.
기존 EventPractice.js를 모두 지우고 다시 작성해봅시다.

// EventPractice.js
import React, { useState } from "react";

const EventPractice = () => {

  const [message, setMessage] = useState("");
  const [username, setUsername] = useState("");

  const onChangeUsername = e => {
    setUsername(e.target.value);
    console.log(e.target.value);
  }

  const onChangeMessage = e => {
    setMessage(e.target.value);
    console.log(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}
      />
      <br />
      <input
        type="text"
        name="message"
        placeholder="메세지를 입력해보세요"
        value={message}
        onChange={onChangeMessage}
        onKeyPress={onKeyPress}
      />
      <br />
      <button onClick={onClick}>확인</button>
    </div>
  );
};

export default EventPractice;

하지만 e.target.name을 이용하여 두 state를 한번에 관리했던 state에 비해 onChange관련 함수를 두개 만들어야 했습니다

관리할 input이 얼마 없다면 이렇게 해도 상관없지만, input값이 많아진다면 e.target.name을 활용하여 관리하는것이 더 좋을 수 있습니다.

e.target.name을 활용한 input값 관리

import React, { useState } from "react";

const EventPractice = () => {
    
  const [form, setForm] = useState({
    username: "",
    message: "",
  });

  const { username, message } = form;

  const onChange = (e) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value,
    });
    console.log({ [e.target.name]: e.target.value });
  };

  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}
      />
      <br />
      <input
        type="text"
        name="message"
        placeholder="메세지를 입력해보세요"
        value={message}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <br />
      <button onClick={onClick}>확인</button>
    </div>
  );
};

export default EventPractice;