좌충우돌 개발자의 길

[토이프로젝트] 리액트에서 onClick이 자동으로 동작하는 에러 해결 본문

PROJECTS/Simple Wallet : 심플한 가계부

[토이프로젝트] 리액트에서 onClick이 자동으로 동작하는 에러 해결

sustronaut 2022. 11. 23. 13:13

# 트러블 슈팅

## 문제 사항

<div onClick={handleRemove}>...</div>

- 위 코드에서 handleRemove가 onClick 되지 않았는데도 자동으로 동작하는 현상이 나타남

 

## 해결 방안

- onClick 이벤트에 함수를 전달하는게 아니라 바로 호출하는 코드였다. 또한, 리액트에서 onclick은 렌더링 때 실행됨.

<div type="button" onClick={()=>{handleRemove}}>...</div>

- type을 button으로 설정하고 onClick 안의 코드를 함수를 전달하는 방식으로 바꾸었다.