[React] 이벤트 처리하기

[React] 이벤트 처리하기

 

📌 이벤트 처리하기

DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사하다.

 

✅ 이벤트명은 카멜 케이스를 사용

이벤트 핸들러는 문자열이 아닌 함수로 전달한다.

<h1 onClick={Hello}>
    Hello React
</h1>

 

✅ false 를 반환해도 기본 동작을 방지할 수 없다.

<button onClick={alert('hello'); return false}>
    welcome to my blog
</button>

 

따라서 이벤트의 기본 동작을 방지하기 위해 preventDefault 를 사용해야한다.

function hello(e){
    e.preventDefault();
    alert('Hello');
}

<button onClick={hello}>
    welcome to my blog
</button>

 

✅ 엘리먼트가 생성된 후에는 addEventListener를 호출할 필요가 없다.

엘리먼트가 처음 렌더링될 때 addEventListener를 제공하면 된다.

 

📌 클래스 컴포넌트 사용 시, this

this 는 render 함수와 constructor 함수에서만 사용할 수 있다.

콜백함수에서 this를 사용하려면 constructor 내부에서 this 를 핸들러 함수에 바인딩 해줘야한다.

class Home extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isToggle: true,
        }
        
        this.hadler = this.handler.bind(this);
    }
    
    hander() {
        this.setState(prev=>({
            isToggle: !prev.isToggle
        }));
    }
    
    render(){
        <button onClick={this.hander}>
            {this.state.isToggle ? 'Sleep' : 'Study'}
        </button>
    }
}

 

클래스 메서드는 기본적으로 this 가 바인딩되어있지 않다.

this 를 바인딩하지 않았을 때, this 는 undefined 가 된다.

 

✅ 만약 클래스필드 문법을 사용하고 있지 않다면?

콜백함수에 화살표 함수를 사용하면된다.

class Home extends React.Component{
    hander() {
        alert('Good!')
    }
    
    render(){
        <button onClick={()=> this.hander()}>
            GO Sleep
        </button>
    }
}

또는 콜백함수에 직접 화살표 함수를 사용

class Home extends React.Component{
    hander = () => {
        alert('Good!')
    }
    
    render(){
        <button onClick={this.hander()}>
            GO Sleep
        </button>
    }
}

 

 

 

---

참고 : MDN 문서, 리액트 공식 문서
  등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.