폼 다루기 기초

import { useState } from 'react';

function NameForm() {
  // (1) input의 현재 값을 저장할 state 선언
  const [name, setName] = useState('');

  // (2) input 값이 변경될 때 호출될 이벤트 핸들러
  const handleChange = (event) => {
    // event.target.value: input 필드의 현재 값
    setName(event.target.value); // state 업데이트
    console.log('현재 입력 값:', event.target.value);
  };

  // (3) 폼 제출 시 호출될 이벤트 핸들러
  const handleSubmit = (event) => {
    alert('제출된 이름: ' + name); // state에 저장된 이름 출력
    event.preventDefault(); // (4) 폼의 기본 동작(페이지 새로고침) 방지
  };

  return (
    <div style={{ border: '1px solid #009688', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>이름 입력 폼</h2>
      <form onSubmit={handleSubmit}>
        <label>
          이름:
          <input
            type="text"
            value={name}
            onChange={handleChange}
            style={{ marginLeft: '10px', padding: '8px', fontSize: '16px', borderRadius: '4px', border: '1px solid #ccc' }}
          />
        </label>
        <button type="submit" style={{ marginLeft: '10px', padding: '8px 15px', fontSize: '16px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          제출
        </button>
      </form>
      <p style={{ marginTop: '15px' }}>
        입력 중인 이름: <span style={{ fontWeight: 'bold', color: '#007bff' }}>{name}</span>
      </p>
    </div>
  );
}

export default NameForm;

import './App.css';
import NameForm from './components/NameForm'; // NameForm 컴포넌트 불러오기

function App() {
  return (
    <div className="App">
      <h1>React 폼 다루기</h1>
      <NameForm />
    </div>
  );
}

export default App;

import { useState } from 'react';

function EssayForm() {
  const [essay, setEssay] = useState('이곳에 에세이를 작성하세요...'); // 초기값 설정

  const handleChange = (event) => {
    setEssay(event.target.value);
  };

  const handleSubmit = (event) => {
    alert('제출된 에세이:\n' + essay);
    event.preventDefault();
  };

  return (
    <div style={{ border: '1px solid #fd7e14', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>에세이 작성 폼</h2>
      <form onSubmit={handleSubmit}>
        <label>
          에세이:
          <textarea
            value={essay}
            onChange={handleChange}
            rows="5"
            cols="40"
            style={{ display: 'block', marginTop: '10px', padding: '8px', fontSize: '16px', borderRadius: '4px', border: '1px solid #ccc', width: '90%' }}
          />
        </label>
        <button type="submit" style={{ marginTop: '15px', padding: '8px 15px', fontSize: '16px', backgroundColor: '#fd7e14', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          에세이 제출
        </button>
      </form>
      <p style={{ marginTop: '15px' }}>
        현재 에세이:<br />
        <span style={{ whiteSpace: 'pre-wrap', color: '#dc3545' }}>{essay}</span>
      </p>
    </div>
  );
}

export default EssayForm;

import { useState } from 'react';

function FlavorForm() {
  // state의 초기값으로 기본 선택될 option의 value를 지정
  const [selectedFlavor, setSelectedFlavor] = useState('grapefruit');

  const handleChange = (event) => {
    setSelectedFlavor(event.target.value);
  };

  const handleSubmit = (event) => {
    alert('선택한 과일: ' + selectedFlavor);
    event.preventDefault();
  };

  return (
    <div style={{ border: '1px solid #20c997', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>좋아하는 과일 선택</h2>
      <form onSubmit={handleSubmit}>
        <label>
          좋아하는 과일을 선택하세요:
          <select value={selectedFlavor} onChange={handleChange}
                  style={{ marginLeft: '10px', padding: '8px', fontSize: '16px', borderRadius: '4px', border: '1px solid #ccc' }}>
            <option value="grapefruit">자몽</option>
            <option value="lime">라임</option>
            <option value="coconut">코코넛</option>
            <option value="mango">망고</option>
          </select>
        </label>
        <button type="submit" style={{ marginLeft: '10px', padding: '8px 15px', fontSize: '16px', backgroundColor: '#20c997', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          제출
        </button>
      </form>
      <p style={{ marginTop: '15px' }}>
        선택된 과일: <span style={{ fontWeight: 'bold', color: '#20c997' }}>{selectedFlavor}</span>
      </p>
    </div>
  );
}

export default FlavorForm;

import { useState } from 'react';

function MultiInputForm() {
  const [formValues, setFormValues] = useState({
    username: '',
    email: '',
    password: ''
  });

  const handleChange = (event) => {
    // (1) event.target에서 name과 value를 비구조화 할당으로 추출
    const { name, value } = event.target;
    setFormValues({
      ...formValues, // (2) 기존 formValues 객체를 복사
      [name]: value // (3) 변경된 input의 name 속성에 해당하는 값만 업데이트
    });
  };

  const handleSubmit = (event) => {
    alert(`제출된 정보:\n사용자 이름: ${formValues.username}\n이메일: ${formValues.email}\n비밀번호: ${formValues.password}`);
    event.preventDefault();
  };

  return (
    <div style={{ border: '1px solid #6f42c1', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>회원가입 폼</h2>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '15px' }}>
          <label>
            사용자 이름:
            <input
              type="text"
              name="username"
              value={formValues.username}
              onChange={handleChange}
              style={{ marginLeft: '10px', padding: '8px', fontSize: '16px', borderRadius: '4px', border: '1px solid #ccc' }}
            />
          </label>
        </div>
        <div style={{ marginBottom: '15px' }}>
          <label>
            이메일:
            <input
              type="email"
              name="email"
              value={formValues.email}
              onChange={handleChange}
              style={{ marginLeft: '10px', padding: '8px', fontSize: '16px', borderRadius: '4px', border: '1px solid #ccc' }}
            />
          </label>
        </div>
        <div style={{ marginBottom: '15px' }}>
          <label>
            비밀번호:
            <input
              type="password"
              name="password"
              value={formValues.password}
              onChange={handleChange}
              style={{ marginLeft: '10px', padding: '8px', fontSize: '16px', borderRadius: '4px', border: '1px solid #ccc' }}
            />
          </label>
        </div>
        <button type="submit" style={{ padding: '8px 15px', fontSize: '16px', backgroundColor: '#6f42c1', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          가입하기
        </button>
      </form>
      <p style={{ marginTop: '15px' }}>
        입력된 사용자 이름: {formValues.username}<br />
        입력된 이메일: {formValues.email}
      </p>
    </div>
  );
}

export default MultiInputForm;

import { useRef } from 'react';

function FileInputForm() {
  const fileInputRef = useRef(null); // useRef 훅으로 ref 생성

  const handleSubmit = (event) => {
    event.preventDefault();
    // ref.current를 통해 실제 DOM 요소에 접근하여 값 가져오기
    alert(`선택된 파일: ${fileInputRef.current.files[0].name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" ref={fileInputRef} /> {/* ref 속성 연결 */}
      <button type="submit">파일 제출</button>
    </form>
  );
}
// 실제 파일 업로드는 더 복잡한 서버 통신을 포함합니다.