React에서의 onClick

사용법

바닐라 자바스크립트의 경우,

element.addEventListener("click", () => {})

React의 경우,

<button onClick={() => console.log("버튼이 눌렸어요")}>버튼</button>

주의사항

1. onclick이 아닌 onClick으로 case sensitive

• 대문자, 소문자 여부에 민감하니 잊지말고 lowerCamelCase 준수

2. 함수로 적는걸 잊는 경우,

<button onClick={console.log("버튼이 눌렸어요")}>버튼</button>

• 버튼이 클릭될 때에 콘솔에 찍히는게 아닌 페이지가 로드될 때마다 콘솔에 찍히게 된다.
• 따라서 onClick={() => console.log("버튼이 눌렸어요")와 같이 함수 형식으로 적어야 한다.

3. Accessibility:onClick은 <button>에만 사용하도록 하자

• Accessibility: 기능, 능력에 관계없이 모든 종류의 사용자가 웹 사이트에 액세스할 수 있도록(사용할 수 있도록) 만드는 방법

• 기술적 측면으로 보자면, onClick은 아무 DOM element에나 붙일 수 있긴하다. (ex. <p>, <h1>, ...)

• 하지만 접근적 측면(Accessibility) 으로 봤을 때, 예를 들어 스크린 리더(컴퓨터 화면 낭독 소프트웨어, 시각장애인이 주로 사용)의 경우에는 <button>외에 onCㅣick을 적용할 경우 사용을 못하는 경우가 생긴다.

• 따라서 더 나은 Accessibility를 위해 onClick은 <button>에만 사용하도록 하자