React) Form값 가져오기

useState에 간단한 폼양식을 넣어두고 onChange를 사용해 인풋, 셀렉박스에서 그 값을 가져와 넣어보기.
규칙이 있다면

• 이름과 사는곳을 입력해야만 저장버튼이 활성화되기
• 사는곳이 한국이면 추가로 입력폼을 열어주기
• 알맞게 입력후 저장버튼을 누르면 alert창을 띄우고 폼입력 초기화시키기

import { useState } from "react";
// 인풋,셀렉박스를 컴포넌트로 쪼개둔후 가져왔다.
import TextInput from "./components/TextInput";
import Select from "./components/Select";

// 셀렉박스에 props로 보낼 옵션값들
const contryOptions = ["한국", "중국", "일본", "러시아", "미국"];

function App() {
  // 값을 받기 전이라 값이 전부 공백인 객체형태의 state
  const [formValue, setFormValue] = useState({
    name: "",
    contry: "",
    address: ""
  });

  // 값이 들어오는지 체크해보기 위해 콘솔로 찍어보기
  console.log(formValue);

  return (
    <div className="App">
      <div className="form">
        <div className="form-item">
          <h1>1. 이름이 무엇인가요?</h1
           // props로 넘겨줄 값들을 설정해주자. 여기엔 이름이 들어갈것이므로 state를 formValue.name으로 설정
          <TextInput
            value={formValue.name}
            // Textinput에서 값이 변경되면 setFormValue로 폼의 값도 변경시켜줄것이다.
            setValue={(value) => {
              setFormValue((state) => ({
                // name을 제외한 나머지 값들도 얕은복사로 가져오기.
                ...state,
                name: value
              }));
            }}
          />
        </div>
        <div className="form-item">
          <h1>2. 사는 곳은 어딘가요?</h1>
          <Select
            // 이름과 마찬가지로 contry값 설정
            value={formValue.contry}
            setValue={(value) => {
              setFormValue((state) => ({
                ...state,
                contry: value
              }));
            }}
            // 추가로 셀렉박스에 넘겨줄 리스트를 props에 넣어준다.
            options={contryOptions}
          />
        </div>
        // 폼의 contry의 값이 한국일 때만 추가로 텍스트인풋을 열어주기 위해 and연산자 활용
        {formValue.contry === "한국" && (
          <div className="form-item">
            <h1>2-1. 한국 어디에 사나요?</h1>
            <TextInput
              // 위 이름폼과 동일한 내용
              value={formValue.address}
              setValue={(value) => {
                setFormValue((state) => ({
                  ...state,
                  address: value
                }));
              }}
            />
          </div>
        )}
        <div className="button-group">
          <button
            // 클릭시 저장되었다는 얼럿창과 함께 폼 초기화시켜주기
            onClick={() => {
              alert("저장되었습니다.");
              setFormValue({
                name: "",
                contry: "",
                address: ""
              });
            }}
            // disabled에 or연산자를 활용해 활성화 시킬지 아닐지 설정
            // formValue.name이 비어있다면 false인데 true로 반전시켜 처음은 두개 다 비워진 상태이므로 비활성화가 된다.
            // name에만 값이 들어왔다면 true로 변경되지만 아직 contry의 값이 반전되지 않았으므로 비활성화가 true인 상태
            // 두개의 값이 들어오고 전부 ture가 되면 값이 반전되어 비활성화가 false값이 되어 해제된다.
            disabled={!formValue.name || !formValue.contry}
          >
            저장
          </button>
        </div>
      </div>
    </div>
  );
}

export default App;

텍스트인풋과 셀렉트는 아래와 같이 컴포넌트를 쪼개준다.

// value, setValue를 props로 받아왔다.
function TextInput({ value, setValue }) {
  return (
    <input
      // value는 텍스트인풋에서 넘겨준 props
      value={value}
      type="text"
      // 값이 바뀔때를 감지하여 setValue값을 변경시켜주어 넘겨주자
      onChange={(e) => {
        setValue(e.target.value);
      }}
    />
  );
}

export default TextInput;

// value, setValue, options를 props로 받아왔다.
function Select({ value, setValue, options }) {
  return (
    <select
      // 텍스트 인풋과 동일하게 받은 props를 설정해 값 넘겨주도록 설정
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
      }}
    >
      <option value="" disabled>
        지역을 선택해주세요.
      </option>
      // 가져온 options로 셀렉트값 뿌려주기
      {options.map((item) => (
        // key값은 본래 고유의 아이디넘버와같은것으로 넘겨주어야 하나 간단히 만든것이므로 생략
        <option key={item} value={item}>
          {item}
        </option>
      ))}
    </select>
  );
}

export default Select;

결과물!...인데 마지막 서울입력하고 저장한부분이 잘렸네..무튼 완성!!