1. 태그안에 바로 정의
const Button = ({ text, color, children }) => {
return (
<button
onClick={() => {
console.log(text);
}}
style=
>
{text} - {color.toUpperCase()}
{children}
</button>
);
};
Button.defaultProps = { color: "black" };
export default Button;
위에처럼 태그 안에 바로 정의 해도 되고 아래처럼 이벤트 로직이 길면 빼서해도 된다.
2. 함수로 빼서 정의
const Button = ({ text, color, children }) => {
const onClickButton = () => {
console.log(text);
};
return (
<button onClick={onClickButton} style=>
{text} - {color.toUpperCase()}
{children}
</button>
);
};
Button.defaultProps = { color: "black" };
export default Button;
함수 이름만 전달해야지 ()이거 붙여서 하면 안된다.
이벤트 객체
리액트에서는 모든 이벤트핸들러 함수에 이벤트 객체라는 것을 제공한다.
const onClickButton = (e) => {
console.log(e);
};
위에처럼 e라는 매개변수를 받아서 출력해보면 
이런식으로 이벤트 객체가 반환되어있다.
이것이 바로 합성 이벤트 객체이다. 브라우저가 너무 많아서 동작이 조금씩 다 다르다. 크롬,엣지,파이어 폭스 등등. 이벤트 객체들도 브라우저 마다 조금씩 다르기 때문에 브라우저 별로 스펙이달라서 발생하는 문제를
cross browsing lssue 라고 한다.
여러 브라우저들의 규격을 통합해서 만들어 놓은 것이
