리액트 onClick, useState 무한루프 reRendering

헤이네킨·2023년 5월 3일
0

리액트

목록 보기
1/1

리액트로 프론트단을 구현하다가 마주친 문제다.
Error창에서 짚어주는 파일들은 사실 건드려본 적 없어서 어떻게 고쳐야 될지 몰랐다.



쇼핑몰 상세페이지를 구현하려했는데, 이 부분에서 문제가 발생했다.


88번과 91번째 줄에서 onClick 이벤트 핸들러 안에 함수를 바로 가져오면 안된다. "()"를 function과 함께 쓰면 처음 렌더링 되면서 QuantButton부분이 호출되며, 그 안에 있는 setState도 같이 실행이 된다. 그 후 컴포넌트의 State가 변하면 리액트는 리렌더링을 한다.
이렇게 되면

  1. QuantButton() 호출
  2. setState()로 state 변경
  3. 1번 -> 2번 -> 1번 -> 2번 무한반복
    의 문제가 발생하게 된다.

해결방법은 다음과 같다

<button onClick={QuantButton}> - </button>
<span>{quantity}</span>
<button onClick={QuantButton}> + </button>

13번째 줄 function QuantButton의 파라미터를 없애 "()" 없이 함수 이름만 전달하거나

<button onClick={() => QuantButton('-')}> - </button>
<span>{quantity}</span>
<button onClick={() => QuantButton('+')}> + </button>

화살표 함수를 넣어줘서 처음 렌더링시에 실행되지 않게 하는 것이다.

0개의 댓글