Onclick 이벤트 사용법 및 정리

웹페이지를 만들면서 버튼을 눌렀을 때, 실행될 함수를 구현하면서 Onclick을 알게되었고, 자주 나오기도 하고 종종 앞으로도 계속 사용할 것 같아 정리하는 시간을 가졌다.

Onclick 이벤트

사용자가 HTML요소를 클릭할 때 발생하는 이벤트이다. 버튼 클릭, 이미지 클릭, 링크 클릭 등 다양한 곳에서 적용될 수 있다.

이러한 페이지를 구성하면서 Onclick 버튼이 안 쓰인 곳이 없었던 것 같다.

<button onClick={ () => {
  createProduct();
  const maxId = Math.max(...rowData.map(data => data.productId));
  setRowData([...rowData, 
  {  productUrls: newProduct?.productUrls[0] ,  productName: "",  productId: newProduct?.productId,  productSize: "",  productColor: '',  productStock: '',}])}}>추가</button>

실제로 버튼을 구성하면서 사용한 코드를 첨부하면서 설명을 덧붙여 보자면,
버튼을 클릭하였을 때 newProduct?.productUrls[0]와 같이 사용하게 되면 newProduct가 undefindned 이거나 nulll일 때 에러 없이 undefined를 반환한다.

웹사이트에서 동적인 기능을 추가하는데 필수적인 도구로 사용되기 때문에 react를 공부하면서 어떻게 동작하는 지 꼭 알고 있어야 한다고 생각이 들었다.