[React] 이벤트 처리하기

document.querySelector('button').addEventListener('click', () => { ... })

리액트에서는 이런 코드로된 명령형 코드를 사용하지 않는다.

대신 리액트에 시키는 선언형 코드를 사용한다.

그리고 이벤트 리스너를 요소에 추가하는 대신 해당 요소에 특별한 prop을 추가한다.

 

내장 요소 props

내장 요소(button, input, li 등)는 on으로 시작하는 prop을 많이 지원한다.

 

 

onClick={}

• onClick에 제공할 값을 함수여야 한다.
• 이벤트가 발생할 때 실행해야 할 함수를 가리키기 때문이다.

function handleClick() {
 ...
}

<li>
	<button onClick={handleClick}>...</button>
</li>

• 특정 이벤트가 발생할 때 호출해야 하는 함수엔 handle~로 시작하게 이름 짓는 것이 일반적이다.
• 함수를 속성 값으로 사용할 때 ()을 붙이면 안된다.
• ()를 붙이면 클릭 시 실행되는 것이 아니라 코드 라인이 실행될 때 함수가 실행되기 때문이다.

 

 

함수 prop의 값으로 전달하기

//app.jsx

function handleSelect() {
  console.log('Hello World - selected')
}

<TabButton onSelect={handleSelect}>Components</TabButton>

• onSelect 속성의 값으로 handleSelect를 넣는다. 단순 포인터 역할을 한다.

// TabButton.jsx

export default function TabButton({children, onSelect}) {
    return (
      <li>
        <button onClick={onSelect}>{children}</button>
      </li>
    );   
}

• 컴포넌트에서 매개변수로 onSelect를 받아오면 onSelect의 값 handleSelect를 사용할 수 있다.

 

 

이벤트 함수에 커스텀 인자 전달하기

function handleSelect(selectedButton) {
  console.log(selectedButton)
}

function TabButton({children, onSelect}) {
    return (
      <li>
        <button onClick={onSelect}>{children}</button>
      </li>
    );   
}

<TabButton onSelect={() => handleSelect('components')}>Components</TabButton>
<TabButton onSelect={() => handleSelect('jsx')}>JSX</TabButton>
<TabButton onSelect={() => handleSelect('props')}>Props</TabButton>
<TabButton onSelect={() => handleSelect('state')}>State</TabButton>

• 어느 버튼이 클릭됐는지 알기 위해선 handleSelect 함수에 매개변수를 전달해야 한다.
• 다른 함수(화살표 함수)로 감싸면 매개변수를 전달할 수 있다.
• () => handleSelect(…)가 이벤트 핸들링의 속성으로 전달되고 이벤트가 발생할 때만 실행되게 된다.

<button onClick={handleSelect('components')}>Components</button>
or
<TabButton onSelect={handleSelect('components')}>Components</TabButton>

• onClick에서 handleSelect()를 받게되면 에러는 나지 않지만 이 파일을 로드하면서 함수명 뒤에 괄호는 즉시 실행시키기에 버튼을 클릭하지 않았는데도 불구하고 components가 출력된다.