React - Handling Events

이벤트(Event)

• 컴퓨터 프로그래밍에서 이벤트는 특정 사건이라는 의미를 가진다.
  • 예를 들면 사용자가 버튼을 클릭한다 --> 이 행위 역시 사건이다.
  • 이를 버튼 클릭 이벤트라고 부른다.
• 웹사이트에는 다양한 이벤트가 많이 있다.
• 이벤트가 발생했을 때 원하는 대로 처리를 해줘야 웹사이트가 정상적으로 작동할 수 있다.
• 이벤트를 처리하는 행위를 이벤트 핸들링이라고 한다.

 

 

DOM의 Event

<button onclick="activate()">
	Activate
</button>

• 이 코드는 DOM에서 클릭 이벤트를 처리하는 예제 코드이다.
• 버튼이 눌리면 activate라는 함수를 호출하도록 설정되어 있다.
• DOM에서는 클릭 이벤트를 처리할 함수를 onclick을 통해 전달한다.

 

 

리액트의 Event

<button onClick={activate}>
	Activate
</button>

• 위의 DOM Event와 동일한 기능을 한다.
• 코드적으로 DOM과 다른 점이 두 개 있다.
• 첫 번째는 onClick이 카멜 케이스로 작성되었다는 점이다. 
• 두 번째는 DOM의 경우 이벤트를 처리할 함수를 문자열로 전달하지만, 리액트의 경우 함수 그대로 전달한다.

 

 

Event Handler

• 어떤 이벤트가 발생했을 때 그 이벤트를 처리하는 함수를 뜻한다.
• 이벤트가 발생하는 것을 듣고 있는다는 의미로 Event Listener라고도 부른다. 

 

 

예시 코드

function Toggle(props) {
	const [isToggleOn, setIsToggleOn] = useState(true);
    
    // 방법 1. 함수 안에 함수로 정의
    function handleClick() {
    	setIsToggleOn((isToggleOn) => ~isToggleOn);
    }
    
    // 방법 2. arrow function을 사용하여 정의
    const handleClick = () => {
    	setIsToggleOn((isToggleOn) => !isToggleOn);
    }
    
    return (
    	<button onClick={handleClick}
        	{isToggleOn ? "켜짐" : "꺼짐"}
        </button>
    );
}

 

 

Arguments, Parameter, 매개변수

• 함수에 전달할 데이터를 의미한다. 

 

 

 

참고

인프런 - 처음 만난 리액트