[react] input 값 저장해서 다른 컴포넌트로 넘겨주기

회원가입과 비슷한 기능으로 여러 input 값을 useState()를 통해 전달했습니다

아래 링크에서 구현된 모습을 확인할 수 있습니다

https://user-images.githubusercontent.com/84219519/219610213-39078ab4-bb1c-4031-82e1-8b6da556143b.gif

 

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './ShippingOptionInput.scss';

const ShippingOptionInput = () => {
  const [toShippingOption, setToShippingOption] = useState(false);
  const [userData, setUserData] = useState({
    first_name: '',
    last_name: '',
    email: '',
    phone_number: '',
    province: '',
    city: '',
    zip_code: '',
  });

  const onChangeInput = event => {
    const { name, value } = event.target;
    setUserData(prev => {
      return { ...prev, [name]: value };
    });
  };

  return (
       <div className="shippingOptionInput">
      <div className="titleWrapper">
        <div className="paymentTitle">배송 옵션</div>
        <div className="edit">편집</div>
      </div>

      <div className="infoWrapper">
        <div>
          <input
            className="infoInput"
            name="lastName"
            type="text"
            placeholder="성*"
            onChange={onChangeInput}
            value={lastName}
          />
        </div>

        <div>
          <input
            className="infoInput"
            name="firstName"
            type="text"
            placeholder="이름*"
            onChange={onChangeInput}
            value={firstName}
          />
        </div>
      </div>

      <div>
        <input
          className="paymentInput"
          name="province"
          type="text"
          placeholder="도/광역시*"
          onChange={onChangeInput}
          value={province}
        />
      </div>

      <div>
        <input
          className="paymentInput"
          name="city"
          type="text"
          placeholder="시/구/군*"
          onChange={onChangeInput}
          value={city}
        />
      </div>

      <div>
        <input
          className="paymentInput"
          name="postalCode"
          type="text"
          placeholder="우편번호*"
          onChange={onChangeInput}
          value={postalCode}
        />
      </div>

      <div className="infoWrapper">
        <div>
          <input
            className="infoInput"
            name="phoneNumber"
            type="text"
            placeholder="전화번호* (- 포함 작성)"
            onChange={onChangeInput}
            value={phoneNumber}
          />
        </div>

        <div>
          <input
            className="infoInput"
            name="email"
            type="text"
            placeholder="이메일*"
            onChange={onChangeInput}
            value={email}
          />
        </div>
      </div>

      <div className="btnWrapper">
        <button className="paymentOptionBtn" onClick={onClickToSelect}>
          저장 및 계속
        </button>
      </div>
    </div>

  );
};

export default ShippingOptionInput;