[TIL 0331] Inputs refactoring

[기존코드]

import { useMutation, gql } from "@apollo/client";
import { useState } from "react";
const 나의그래프큐엘세팅 = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;
export default function GraphqlMutationPage() {
  const [writer, setWriter] = useState("");
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");
  const [나의함수] = useMutation(나의그래프큐엘세팅);
  const onClickSubmit = async () => {
    const result = await 나의함수({
      variables: {
        //variables가 $역할을 한다.
        writer: writer,
        title: title,
        contents: contents,
      },
    });
    console.log(result);
  };
  function onChangeWriter(event) {
    setWriter(event.target.value);
  }
  function onChangeTitle(event) {
    setTitle(event.target.value);
  }
  function onChangeContents(event) {
    setContents(event.target.value);
  }
  //한 줄일 때는 (괄호) 필요없음
  return (
    <div>
      작성자: <input type="text" onChange={onChangeWriter} />
      제목: <input type="text" onChange={onChangeTitle} />
      내용: <input type="text" onChange={onChangeContents} />
      <button onClick={onClickSubmit}>Graphql-API 요청하기</button>
    </div>
  );
}

[리팩토링]

import { useMutation, gql } from "@apollo/client";
import { useState } from "react";
const 나의그래프큐엘세팅 = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;
export default function GraphqlMutationPage() {
  const [inputs, setInputs] = useState({
    // 1번
    writer: "",
    title: "",
    contents: "",
  });
  // const [writer, setWriter] = useState("");
  // const [title, setTitle] = useState("");
  // const [contents, setContents] = useState("");
  const [나의함수] = useMutation(나의그래프큐엘세팅);
  const onClickSubmit = async () => {
    const result = await 나의함수({
      variables: {
        ...inputs,
       	// writer: inputs.writer,
        // title: inputs.title,
        // contents: inputs.contents,
      },
    });
    console.log(result);
  };
  function onChangeInputs(event) {
    setInputs({
      // 2번
      ...inputs,[event.target.id]: event.target.value,
    });
    // setWriter(event.target.value);
  }
  // function onChangeTitle(event) {
  //   setInputs({
  //     // 2번
  //     ...inputs,
  //     [event.target.id]: event.target.value,
  //   });
  // }
  // function onChangeContents(event) {
  //   setInputs((prev) => ({
  //     // 2번
  //     ...prev,
  //     [event.target.id]: event.target.value,
  //   }));
  // }
  return (
    <div>
      작성자: <input type="text" id="writer" onChange={onChangeInputs} />
      제목: <input type="text" id="title" onChange={onChangeInputs} />
      내용: <input type="text" id="contents" onChange={onChangeInputs} />
      <button onClick={onClickSubmit}>Graphql-API 요청하기</button>
    </div>
  );
}

객체의 특성을 이용해 묶어보자!
객체에서는 키 중복이 안된다.
만약 사용자가 강제로 중복된 키를 사용한다면?
어떻게 될까?
하단의 키가 상단의 키를 덮어 씌우므로
하단에 명시해놓은 키가 출력된다.
3개가 동일해짐!
이제 스프레드 연산자를 사용해서 수정!
키에 대괄호는 배열이 아님
자바스크립 변수라는 뜻!