[React] useState 여러개 사용하기

useState 여러 개 사용하기

아래 코드는 useState를 여러 개 선언 함

import React, { useState } from 'react';

import EventPractice from './EventPractice';

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 style={{ display: 'flex', flexDirection: 'column' }}>
      <h1>이벤트 연습</h1>

      <input
        type="text"
        name="username"
        value={username}
        placeholder="사용자명"
        style={{ width: '150px' }}
        onChange={onChangeUsername} //input 은 onChange고 button은 onClick
      />
      {/* { width: '150px' } 해당 부분은 객체라서 위에 const style ={ width: '150px' }라고 쓰임 */}
      <input
        type="text"
        name="message"
        value={message}
        placeholder="아무거나 입력해 보세요"
        style={{ width: '150px' }}
        onChange={onChangeMessage}
        onKeyPress={onKeyPress}
      />
      <button style={{ width: '150px' }} onClick={onClick}>
        확인
      </button>
    </div>
  );
};

export default EventPractice;

useState 여러 개를 묶어서 사용하기

아래 코드는 위에서 useState를 여러 개 사용한 것을 하나로 묶어거 선언 함

import { useState } from 'react';
import './EventPractice.scss';

const EventPractice = () => {
  const [form, setForm] = useState({
    username: '', //username이 key고 ''가 value이다
    message: '',
  });// 초깃값 설정
  
  const { username, message } = form;
  //수많은 const를 합쳐주는 기능
  
  const onChange = (e) => {
    const nextForm = {
      ...form,
      [e.target.name]: e.target.value,
      //name이 value가 바뀜으로서 밑에 name으로 정의된거로 바뀌므로 유동적으로 바뀜
      //value는 지정한 값이라고 생각하면 편함
    };
    setForm(nextForm);
  };

  const onClick = () => {
    //click은 e를 안넣고 onchange onkeypress같은건 넣음
    alert(username + ':' + message);
    setForm({
      username: '',
      message: '',
    });
  };

  const onKeyPress = (e) => {
    if (e.key === 'Enter') {
      onClick();
    }
  };

  return (
    <div className="templte">
      <h1>이벤트 연습</h1>

      <input
        type="text"
        name="username"
        value={username}
        placeholder="사용자명"
        style={{ width: '150px' }}
        onChange={onChange} //input 은 onChange고 button은 onClick
      />
      {/* { width: '150px' } 해당 부분은 객체라서 위에 const style ={ width: '150px' }라고 쓰임 */}
      <input
        type="text"
        name="message"
        value={message}
        placeholder="아무거나 입력해 보세요"
        style={{ width: '150px' }}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <button style={{ width: '150px' }} onClick={onClick}>
        확인
      </button>
    </div>
  );
};

export default EventPractice;

코드 설명

1.

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

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

username과 message를 묶어서 form으로 변수를 두었다

2.

 const onChangeUsername = (e) => setUsername(e.target.value);
 const onChangeMessage = (e) => setMessage(e.target.value);

 const onChange = (e) => {
    const nextForm = {
      ...form,
      [e.target.name]: e.target.value,
      //그러면 밑에 input에 value랑 name두개다 지정을 해줘야하는건가 name만 지정하면 되는건가?
      //name이 value가 바뀜으로서 밑에 name으로 정의된거로 바뀌므로 유동적으로 바뀜
      //value는 지정한 값이라고 생각하면 편함
    };
    setForm(nextForm);
  };

onChangeUsername와 onChangeMessage를 onChange로 묶었다

1. … form을 통하여 위에 const { username, message } = form; 해당 코드의 form에 포함된 변수 들을 불러온다.

2. 밑에 지정해 둔 value={username}, value={message} 를 통해 e.target.value의 value값이 달라지면 해당 e.target.name 이 그 값에 해당하는 name="username" name=”message” 으로 정의된걸로 유동적으로 바뀐다.

3. setForm(nextForm); 위에서 nextForm에 값이 입력되면 그값이 setForm을 통하여 form에 속한 username,message값이 바뀌게 된다