Simple Diary - (1) 중복 제거 (state, onChange 합치기)

동작이 비슷한 state 하나로 묶기

 

before

  const [author, setAuthor] = useState("");
  const [content, setContent] = useState("");

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기장</h2>
      <div>
        <input
          value={author}
          onChange={(event) => {
            setAuthor(event.target.value);
          }}
        ></input>
      </div>
      <div>
        <textarea
          value={content}
          onChange={(event) => {
            setContent(event.target.value);
          }}
        ></textarea>
      </div>
    </div>
  );

after

- 객체로 만들어 새로운 객체를 setState로 전달

const [state, setState] = useState({
    author: "",
    content: "",
  });

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기장</h2>
      <div>
        <input
          value={state.author}
          onChange={(event) => {
            setState({
              author: event.target.value,
              content: state.content,
            });
          }}
        ></input>
      </div>
      <div>
        <textarea
          value={state.content}
          onChange={(event) => {
            setState({
              author: state.author,
              content: event.target.value,
            });
          }}
        ></textarea>
      </div>
    </div>
  );

 

but, state 갯수가 많아지면 하나의 state를 바꾸는데도 중복 코드 필요

스프레드 연산자를 이용하자!

return (
    <div className="DiaryEditor">
      <h2>오늘의 일기장</h2>
      <div>
        <input
          value={state.author}
          onChange={(event) => {
            setState({
              ...state,
              author: event.target.value,
            });
          }}
        ></input>
      </div>
      <div>
        <textarea
          value={state.content}
          onChange={(event) => {
            setState({
              ...state,
              content: event.target.value,
            });
          }}
        ></textarea>
      </div>
    </div>
  );

-> 원래의 값을 기본적으로 미리 할당 가능

 

onChange callback 함수 합치기

const handleChangeState = (event) => {
    setState({
      ...state,
      [event.target.name]: event.target.value,
    });
  };

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기장</h2>
      <div>
        <input name="author" value={state.author} onChange={handleChangeState}></input>
      </div>
      <div>
        <textarea name="content" value={state.content} onChange={handleChangeState}></textarea>
      </div>
    </div>
  );