[React] 컴포넌트에 이벤트 추가 가능?

문제상황

예를 들어 버튼 컴포넌트를 하나 만들었다.

funcion BlackButton(){
	<button>버튼</button>
}

export default BlackButton;

이 컴포넌트를 쓰고 싶은 페이지에 import했다.

import BlackButton from ".../"

function List(){
	const[count, setCount] = useState(0)
	<div>
    	<span>{count}</span>
        <BlackButton/>
    </div>

}

export default Likt;

이 상황에서 BlackButton 컴포넌트에 바로 이벤트를 달 수 없다.

이유

이벤트를 DOM요소에만 설정할 수 있기 때문이다. 직접 만든 component는 DOM요소가 아니다.

해결방법

1. 컴포넌트를 포기한다.
2. 이벤트 설정까지 고려해서 수정한다.