React에서 이벤트 적용하기

1.문제상황

상품 리스트를 조회 한 데이터를 map 함수로 렌더링했다. 이 때 개별 버튼에 onClick 이벤트를 추가했다.

2.에러 메시지

state 변경이 무한으로 발생했다.

3.해결 방법

onClick 이벤트 핸들러 함수가 컴포넌트 렌더링 때도 실행되기에 문제가 되었다. 이처럼 함수를 직접 실행하는 형태로 넣으면 리액트 문법상 렌더링되는 순간 함수가 실행된다. 함수가 실행되면 리렌더링이 진행되기 때문에 다시 함수가 실행된다.

따라서 화살표 함수의 형태로 이벤트 해들러를 연결하는 것이다.

onClick={handleClick()}이 아닌 onClick={() => {handleClick()}}