폼 다루기 기초

// src/components/EssayForm.js
import React, { 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} // state와 연결
            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;

// src/components/FlavorForm.js
import React, { 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;

// src/components/MultiInputForm.js
import React, { 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" // (4) name 속성을 추가하여 어떤 input인지 식별
              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" // (4) name 속성
              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" // (4) name 속성
              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 React, { 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>
  );
}
// 실제 파일 업로드는 더 복잡한 서버 통신을 포함합니다.