리액트를 다루는 기술 개정판 [Event, ref: DOM]

4. 이벤트 핸들링

  . 리액트에서의 이벤트: 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것

 

  . 주의사항 

    . 이벤트 이름은 카멜 표기법으로 작성한다.

    . 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.

    . DOM 요소에만 이멘트를 설정할 수 있다.

 

  . 종류 (https://facebook.github.io/react/docs/events.html/ 참고)

    . Clipboard, Composition, Keyboard, Focus, Form, Mouse, Selection, Touch, UI, Wheel, Media

    . Image, Animation, Transition

 

  . onChange

  . SyntheticEvent

    . 웹 브라우저의 네이티브 이벤트를 감싸는 객체. 이벤트가 끝나고 나면 초기화됨

    . 비동기적으로 참조할 일이 있다면 e.target.value (e.persist())를 사용해야 한다.

  . state에 input 값 담기

    . state 선언 후, input의 onChange에서 setState를 활용하여 해당 값을 업데이트해준다.

 

  . 임의 메서드 만들기

    . 함수를 미리 준비하여 전달하면 가독성이 훨씬 높아진다.

    . 함수가 호출될 때 this는 호출부에 따라 결정되므로, 메서드를 this와 바인딩하는 작업이 필요하다.

    . 만약 바인딩하지 않는 경우라면 this가 undefined를 가리키게 된다.

    . 메서드 바인딩은 생성자에서 하는 것이 정석 -> Property Initializer Syntax를 사용하면 훨씬 간편해짐, p.132

 

  . input 여러개 다루기 

    . event 객체의 e.target.name 값 사용하기 

    . 객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다.

    . form, setForm으로 여러 개의 state를 한 번에 선언할 수도 있다.

 

  . onKeyPress 이벤트 핸들링

    . 특정 키보드 Key를 눌렀을 때 발생하는 이벤트를 정의. 예: if (e.key === 'Enter') {~~}

 

5. ref: DOM

  . 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다.

  . 리액트 내부에서 DOM에 이름을 다는 방법이 바로 ref 개념이다.

  . id과 ref의 차이: ref는 컴포넌트 내부에서만 작동한다. (id는 중복 id 발급을 방지해야 한다)

 

  . ref의 사용 상황: DOM을 꼭 직접적으로 건드려야 할 때

    . 특정 input에 포커스 주기 

    . 스크롤 박스 조작하기 

    . Canvas 요소에 그림 그리기 등

 

  . 콜백 함수를 통한 ref 설정 

    . ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해준다. 그리고 함수 내부에서 ref를 멤버 변수로 설정

    . <input ref={(ref) => {this.input=ref}} />

 

  . createRef를 통한 ref 설정 (v16.3부터 도입됨)

    . 컴포넌트 내부에 멤버 변수로 React.createRef()를 담고, 해당 변수를 ref를 달고자 하는 요소에 ref props로 넣어 준다.