이벤트핸들링에 대해서는 거의 대부분 알지만,
몇가지 헷갈리는 부분만 짚고 넘어가보겠습니다.

onChange()

input을 넣는 메서드입니다.
여러개의 input을 넣는 부분에 대해서 다시 보겠습니다.

const [form, setForm] = useState({
  name: "",
  message: "",
});
const handleChange = (e) => {
  setForm({...form, [e.target.name]: e.target.value });
};
<input
  name=""
  onChange={handleChange;}
/>;

input에 name을 사용하면 e.target.name으로 접근이 가능하더라 이말입니다. 저는 몰랐어요.. ㅎㅎ

Ref

부제) DOM에 이름 달기

저희가 보통은 특정 DOM 요소에 이름을 달 때, id 를 달아서 사용합니다.
<div id="rooooot">

이와 비슷하게 프로젝트 내에서 DOM에 이름을 다는 방법이 있습니다.
바로 이게 Ref 입니다 (reference)

그렇다면 이걸 왜 써야할까요 ? id를 쓰면 안될까요?

정답은 DOM을 꼭 사용해야 하는 상황에서 사용됩니다.

DOM을 꼭 사용해야 하는 상황

• 특정 input에 포커스 주기
• 스크롤 박스 조작하기
• canvas 요소에 그림 그리기 등
  이 있습니다

이 때는 어쩔 수 없이 DOM에 접근하는데, 이를 위해 ref를 사용합니다.

class 형에서 사용

class 형에서 ref를 먼저 사용해 보겠습니다.

1. 콜백 함수를 통한 ref 설정
   ref를 만드는 가장 기본적인 방법은 콜백 함수를 이용하는 것입니다.
   아래와 같이 만들 수 있습니다.
   <input ref={(ref)=>{this.input=ref}}/>

2. createRef
   조금 더 쉽게 사용이 가능해집니다.
   이 번에는 focus 도 부여해 보겠습니다.

class Sample extends Component {
  input = React.createRef();
  handleFocus = () => {
    this.input.curent.focus();
  };
  render() {
    return <input ref={this.input} />;
  }
}

this.scrollBox.scrollToTop() 이런식으로도 자주 사용됩니다.

ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 고려하라고 합니다.서로 다른 컴포넌트끼리 ref를 전달하면 코드가 꼬일수도 있다고 하네요.

컴포넌트 반복

---

map 을 사용해서 컴포넌트를 반복하게 되면 "key" 가 필수입니다.
이건 왜 그럴까요?

리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지를 알아내기 위해 사용합니다.
key 가 없다면 Virtual DOM을 비교하는 과정에서 순차적으로 비교해가며 변화를 감지합니다.
key 가 있다면 이 값을 사용해 어떤 변화가 있었는지 알아낼 수 있습니다.

리액트에서 상태를 업데이트 할때 기존 상태를 둬야합니다.
우리는 setState 를 할 때 배열의 경우, 불변성을 유지하기 위해 Push가 아닌 concat을 사용하고 있습니다.
불변성을 유지해야 리액트 컴포넌트의 성능을 최적화할 수 있기 때문입니다.
(이유는 다음 챕터에서 확인합니다.)