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();
    }
  };