state 실습

다양한 입력폼을 간단하게

import { useState } from "react";

function Body() {
  const [state, setState] = useState({
    name: "",
    gender: "",
    birth: "",
    bio: "",
  });

  const onChange = (e) => setState({ ...state, [e.target.name]: e.target.value });
  return (
    <div>
      <div>
        <input
          name="name"
          onChange={onChange}
          placeholder="이름"
        />
      </div>
      <div>
        <select
          name="gender"
          onChange={onChange}
        >
          <option key=""></option>
          <option key="남성">남성</option>
          <option key="여성">여성</option>
        </select>
      </div>
      <div>
        <input
          name="birth"
          type="date"
          onChange={onChange}
        />
      </div>
      <div>
        <textarea
          name="bio"
          onChange={onChange}
        />
      </div>
    </div>
  );
}

export default Body;

state를 자식 컴포넌트에 보내기

import { useState } from "react";
import PropTypes from "prop-types";

function Viewer({ number }) {
  return <div>{number % 2 == 0 ? "짝수" : "홀수"}</div>;
}


Viewer.propTypes = {
  number: PropTypes.number.isRequired,
};

function Body() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => setNumber(number + 1);
  const onDecrease = () => setNumber(number - 1);

  return (
    <div>
      <h2>{number}</h2>
      <Viewer number={number} />
      <div>
        <button onClick={onDecrease}>-</button>
        <button onClick={onIncrease}>+</button>
      </div>
    </div>
  );
}

export default Body;