[React] [감정일기장] - 기초1

강의 출처 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/

기존 코드

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

return (
  <div className="DiaryEditor">
      <div>
          <input name="author" type="text" 
              value={state.author} 
              onChange={(e)=>{
                  setAuthor(e.target.value);
              });
          />
      </div>
      <div>
          <textarea value={state.content} 
              onChange={(e)=>{
                  setContent(e.target.value)
              }}
           />
      </div>
  </div>
)

1. 2개의 useState를 하나로 합치기

* 수정된 부분만 작성

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


<input name="author" type="text" 
	value={state.author} 
	onChange={(e)=>{
		setState({
            author: e.target.value,
            content: state.content,
        });
	});
/>

<textarea value={state.content} 
	onChange={(e)=>{
		setState({
         	content: e.target.value,
            author: state.author,
        });
	}}
/>

2. spread 연산자 사용하기

* 업데이트가 위에서부터 순차적으로 진행되기 때문에 spread 연산자 작성 위치 중요함

<input name="author" type="text" 
	value={state.author} 
	onChange={(e)=>{
		setState({
        	...state,
            author: e.target.value,
        });
	});
/>

<textarea value={state.content} 
	onChange={(e)=>{
		setState({
        	...state,
         	content: e.target.value,
        });
	}}
/>

3. 이벤트를 함수화 시키기

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

<input name="author" type="text" value={state.author} onChange={handleChangeState}/>

<textarea name="content" value={state.content} onChange={handleChangeState}/>

* [e.target.name] : e.target.value 

현재 한개 이상의 입력항목(input, textarea)가 있기 때문에 중복 방지를 위해
각 입력값에 이름을 부여해야 한다. 입력값이 많아진다면 수동으로 각각의 이름을 부여하기에
무리가 있기 때문에 동적으로 이름을 생성할 수 있는 방법인 []를 사용해준다. 
이는 **비구조화 할당** 의 패턴이기도 하다.

함수 안의 name은 input 혹은 textarea에 인라인으로 작성해준 name=""과 동일함