[React] 이벤트 사용할때 주의 사항

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

예를 들어, HTML에서의 onclick은 리액트에서는 onClick으로 작성해야 한다.

 

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

HTML에서 이벤트를 설정할 때는 큰 따옴표("") 안에 시랳ㅇ할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다.

 <button
          onClick={() => {
            alert("이런 식으로 onClick에 화살표 함수를 작성하고 객체 형식 씌여서 대입한다.");
          }}
        >
          확인
</button>

 

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

div, button, input, form, span등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정 할 수 없다.

예를 들어, MyComponent에 onClick값을 설정한다면 MyComponent를 클릭할 때 doSomething 함수를 실행하는 것이 아니라, 

그냥 이름이 onClick인 props를 MyComponent에게 전달해 줄 뿐이다.

<MyComponent onClick={doSomething}/>

따라서 컴포넌트에 자체적으로 이벤트를 설정할 수는 없다.

하지만, 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정할 순 있다.

<div onClick={this.props.onClick}>
	{....}
</div>