React란
Components module과 비슷하게 component로 이루어져있다. 재사용률이 뛰어나다. 2013년에 Facebook에서 만들었다. Virtual Dom이다. 여러 가지의 리스트 중 바뀐 한 가지 아이템만 바꿔준다.
Babel/ Webpack
Babel- 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환 시켜줌
Webpack- 여러 가지의 파일을 한개로 결합해준다.
NPM vs NPX
원래는 creact-react-app할 때 npm install -g create-react-app으로 했다. global 디렉토리에 다운받았다.
이제는 npx를 이용하여 creact-react-app을 이용할 수 있다. npx가 npm registory에서 create-react-app을 찾아서 다운로드 없이 실행 시켜준다.
Disk Space를 낭비하지 않을 수 있다. 항상 최신 버전을 사용할 수 있다.
KeyPress 이벤트
키보드의 Keypress 이벤트를 이용해서 Enter가 입력되면 create 메서드 실행
render() {
return (
<div>
<h2>Create Contact</h2>
<div>
<input
...
/>
<input
...
onKeyPress={this.handleKeyPress} <- 이렇게요.
/>
</div>
<button type="button" onClick={this.handleClick}>
Create
</button>
</div>
);
}
핸들러 함수를 선언
handleKeyPress = (e) => {
if (e.key === "Enter") {
this.handleClick();
}
};