[소플의 처음 만난 리액트] 11장 실습문제

NameForm.jsx

import React, { useState } from "react";

function NameForm(props) {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    // 사용자가 입력한 값을 함수로 변경할 수도 있음
    // input에 들어가는 값이 변경될 때마다 실행 ex) 네이버 검색창의 추천 검색어 제공 처럼 활용 가능
    setValue(event.target.value.toUpperCase());
  }

  const handleSubmit = (event) => {
    alert('입력한 이름: ' + value);
    // 서버가 없기 때문에 기본적으로 설정된 동작 막음
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" value={value} onChange={handleChange} />
        {/* <textarea type="text" value={value} onChange={handleChange} /> */}
      </label>
      <button type="submit">제출</button>
    </form>
  )
}

export default NameForm;

핵심 키워드

• event를 통해 사용자가 입력한 값을 실시간으로 함수를 통해 변경할 수 있다.

• event.preventDefault() 함수는 기본적으로 설정된 동작을 막는 함수다.

FruitSelect.jsx

import React, {useState} from "react";

const data = [
  {
    id: 1,
    type: 'apple',
    name: '사과',
  },
  {
    id: 2,
    type: 'banana',
    name: '바나나',
  },
  {
    id: 3,
    type: 'grape',
    name: '포도',
  },
  {
    id: 4,
    type: 'orange',
    name: '오렌지',
  },
]

function FruitSelect(props){
  const [value, setValue] = useState('grape');

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

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

  return(
    <form onSubmit={handleSubmit}>
      <label>
        과일을 선택하세요:
        <select value={value} onChange={handleChange}>
          {/* 미리 태그를 작성해 두는게 아니라 데이터를 서버에서 받아올 경우는 forEach 함수나 map 함수를 사용한다. */}
          {data.map((e) => {
            return <option key={e.id} value={e.type}>{e.name}</option>;
          })}
        </select>
      </label>
      <button type="submit">제출</button>
    </form>
  )
}

export default FruitSelect;

핵심 키워드

• 백엔드에서 데이터를 받아오는 것을 염두해서 코드를 작성해야 한다. 컴포넌트를 렌더링하는 경우 미리 태그를 작성해두는 것이 아닌 forEach()함수나 map()함수를 통해 목록을 렌더링한다.

Reservation.jsx

import React, { useState } from "react";

function Reservation(props) {
  const [haveBreakfast, setHaveBreakfast] = useState(true);
  const [numberOfGuest, setNumberOfGuest] = useState(2);

  const handleSubmit = (event) => {
    alert(`아침식사 여부: ${haveBreakfast}, 방문객 수: ${numberOfGuest}`);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        아침식사 여부:
        <input
          type="checkbox"
          checked={haveBreakfast}
          onChange={(event) => {
            setHaveBreakfast(event.target.checked);
          }} />
      </label>
      <br />
      <label>
        방문객 수:
        <input
          type="number"
          value={numberOfGuest}
          onChange={(event) => {
            setNumberOfGuest(event.target.value);
          }} />
      </label>
      <button type="submit">제출</button>
    </form>
  )
}

export default Reservation;

핵심 키워드

• 하나의 컴포넌트에서 여러 개의 입력을 다루기 위해서는 여러 개의 state를 선언해서 각각의 입력에 대해 사용하면 된다.

SignUp.jsx

import React, { useState } from "react";
// 사용자 정보 입력받기

function SignUp(props){
  const [name, setName] = useState("");
  const [gender, setGender] = useState("남자");

  const handleChangeName = (event) => {
    setName(event.target.value);
  };

  const handleChangeGender = (event) => {
    setGender(event.target.value);
  };

  const handleSubmit = (event) => {
    alert(`이름: ${name}, 성별: ${gender}`);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름: 
        <input type="text" value={name} onChange={handleChangeName} />
      </label>
      <br />
      <label>
        성별:
        <select value={gender} onChange={handleChangeGender}>
          <option value="남자">남자</option>
          <option value="여자">여자</option>
        </select>
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

export default SignUp;

핵심 키워드

• 사용자 입력을 받을 경우에는 input 뿐만 아니라 다양한 type을 컴포넌트로 만들 수 있다.

결론!