개발자의 개발 블로그

[이벤트(Event) 시스템(System)]

유저가 웹브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(Event)라 부른다.

- 버튼을 클릭했을 때, onclick

- 버튼을 두번 클릭했을 때,

- 버튼에 마우스 커서를 올렸을 때, 

- input 창에 값이 바뀔 때,

등등 수많은 이벤트가 존재한다.

HTML 이벤트와 비교해서 리액트에서 이벤트 사용시 주의 사항

1. camelCase를 사용한다.

HTML에서는 onclick, onkeyup과 같이 소문자로 작성했다. 

하지만, React에서는 camelCase를 쓴다. 

camelCase란 여러 단어가 붙여지는 변수 선언시 첫 단어를 대문자 처리하는 것이다.

onClick, onKeyUp으로 사용한다. 

2. 이벤트에 실행할 자바스크립트 코드를 전달하지 않고, 함수 형태의 값을 전달한다.

HTML에서는 

<button onclick= "alert('Clicked')">클릭</button>와 같이 

onclick 안에 자바스크립트 코드가 들어가지만, React에서는 

 <button onClick= { () => {

            this.setState({

              number: this.state.number+22

            })

          }

        }

        >Plus 22

        </button>

와 같이 함수 형태로 전달한다. 물론, 외부에 미리 함수를 만들어서 전달해도 된다.

3. DOM 요소에서만 이벤트를 설정할 수 있다. 

- 직접 만든 컴포넌트는 이벤트를 자체적으로 설정할 수 없다

- 우리가 만든 컴포넌트에 이벤트를 달게 되면, 이름으로 설정되어 props값을 전달하게 된다.

- 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있다.

이벤트 처리 방법

1.함수를 직접 기입하기

2. 함수를 외부에 선언 후, 함수 호출하기

이 코드는 매우 짧아서 못 느끼겠지만,

길어지게 되면 아래 코드가 더욱 간결 & 깔끔하며 가독성이 높아진다는 것을 알 수 있다.

[input 여러 개 핸들링]

인풋이 여러개면, 메소드를 인풋 개수만큼 만들어야할까?

그럼 매우 비효율적일 것이다. 바로 event 객체를 활용하는 것이다.

input의 이름(name)속성을 이용하여 이벤트 핸들러에서 e.target.name을 사용할 수 있다.

이동을 하기 위해 키보드의 값 또는 마우스의 클릭을 받아야할 때가 있다.

이때 사용하는 문법이 바로 Input클래스이다.

        if (Input.GetKeyDown(KeyCode.UpArrow) || Input.GetKeyDown(KeyCode.W))

        {

            anim.Play(walk_up); 

        }

        else if (Input.GetKeyDown(KeyCode.DownArrow) || Input.GetKeyDown(KeyCode.S))

        {

            anim.Play(walk_down); 

        }

이렇게 작성을 하면, 

위 화살표 키 또는 W키가 눌렸을때, walk_up 애니메이션을 실행하고,

아래 화살표 키 또는 S키가 눌렸을때, walk_down 애니메이션을 실행한다.

Input.GetKeyDown(KeyCode.XX)

이것으로 키보드의 입력을 받아들인다.

그렇다면, 마우스 클릭은 어떻게 받아들일까?

Input.GetMouseButtonDown(0)

이렇게 작성하면 마우스의 클릭 신호를 받는다. 

그런데 괄호안에 0은 무엇을 의미하는 것일까.

바로, 0은 왼쪽 마우스 버튼, 1은 오른쪽 마우스 버튼을 의미한다.

게임할때는 주로 왼쪽을 사용하므로 (0)을 기입하면된다.