이벤트 핸들링

 

이벤트가 뭔가요?

- 흔히들 이벤트라고 하면 연인...에게 해 주는 깜짝 파티 같은 걸 떠올릴 수도 있어요. (전 이벤트 안 당해 봤지만요... 💩)

 

컴퓨터 프로그래밍에서의 이벤트는 사건 이라는 의미를 가지고 있습니다. (a.k.a. 사건의 지평선)

예를 들면 사용자가 버튼을 클릭하는 사건도 하나의 이벤트로 보는 거죵. (클릭 이벤트)

 

웹에는 굉장히 다양한 이벤트들이 있습니다. ^-^

 

<button onclick="activate()">버튼이무니다.</button>

 

위 코드는 DOM 에서 클릭 이벤트를 처리하는 예제 코드예요.

버튼이 눌리면 activate() 라는 함수를 호출하는게지요...

DOM 에서는 클릭 이벤트를 처리할 함수를 onclick 을 통해서 전달하무니다.

 

<button onClick={activate}>버튼이무니다</button>

 

리액트에서의 이벤트 처리는 좀 다릅니다.

위의 코드를 보면 이벤트의 이름인 onclick이 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>
        )
}

 

 

 

출처 : 위키트리 카멜 표기법 이미지

** 카멜 표기법 (Camel case) 이란? **

> 카멜 표기법은 사막에 있는 낙타의 등 모양을 보고 이름을 지은 것인데, 낙타의 등을 보면 굴곡진 혹이 있어서 오르락 내리락하는 형태를 볼 수 있음. 이처럼 카멜 표기법은 첫 글자는 소문자로 시작하되, 중간에 나오는 새로운 단어의 첫 글자를 대문자로 사용한 방법입니다. 글자의 크기가 변하는 게 마치 낙타의 등과 같다고 해서 카멜 표기법으로 이름이 지어졌습니다! 

 

Arguments 전달하기

 

> Arguments 는 주장, 논쟁, 말다툼이라는 뜻을 가지고 있음.

> 여기에서는 함수에 주장할 내용이라고 이해하면 됨.

> 함수에 전달할 데이터를 Arguments 라고 하며, 같은 의미로 파라미터 라는 용어도 많이 사용함.

> 우리 말로는 매개변수 라고 부름!

 

함수 컴포넌트에서는 이벤트 핸들러에 매개변수를 전달할 때 아래와 같이 하면 됨.

참고로 매개변수의 순서는 원하는 대로 변경해도 상관 음슴,.

 

function MyBtn (props) {
	const handleDelete = (id, event) => {
    		console.log(id, event.target);
   	};
    
    	return (
            <button onClick={(event) => handleDelete(1, evenrt)}>삭제하기</button>
        )
}