리액트로 프론트단을 구현하다가 마주친 문제다.
Error창에서 짚어주는 파일들은 사실 건드려본 적 없어서 어떻게 고쳐야 될지 몰랐다.
쇼핑몰 상세페이지를 구현하려했는데, 이 부분에서 문제가 발생했다.
88번과 91번째 줄에서 onClick 이벤트 핸들러 안에 함수를 바로 가져오면 안된다. "()"를 function과 함께 쓰면 처음 렌더링 되면서 QuantButton부분이 호출되며, 그 안에 있는 setState도 같이 실행이 된다. 그 후 컴포넌트의 State가 변하면 리액트는 리렌더링을 한다.
이렇게 되면
해결방법은 다음과 같다
<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>
화살표 함수를 넣어줘서 처음 렌더링시에 실행되지 않게 하는 것이다.