이벤트핸들링에 대해서는 거의 대부분 알지만,
몇가지 헷갈리는 부분만 짚고 넘어가보겠습니다.
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으로 접근이 가능하더라 이말입니다. 저는 몰랐어요.. ㅎㅎ
부제) DOM에 이름 달기
저희가 보통은 특정 DOM 요소에 이름을 달 때, id 를 달아서 사용합니다.
<div id="rooooot">
이와 비슷하게 프로젝트 내에서 DOM에 이름을 다는 방법이 있습니다.
바로 이게 Ref 입니다 (reference)
그렇다면 이걸 왜 써야할까요 ? id를 쓰면 안될까요?
정답은 DOM을 꼭 사용해야 하는 상황에서 사용됩니다.
이 때는 어쩔 수 없이 DOM에 접근하는데, 이를 위해 ref를 사용합니다.
class 형에서 ref를 먼저 사용해 보겠습니다.
콜백 함수를 통한 ref 설정
ref를 만드는 가장 기본적인 방법은 콜백 함수를 이용하는 것입니다.
아래와 같이 만들 수 있습니다.
<input ref={(ref)=>{this.input=ref}}/>
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을 사용하고 있습니다.
불변성을 유지해야 리액트 컴포넌트의 성능을 최적화할 수 있기 때문입니다.
(이유는 다음 챕터에서 확인합니다.)