(React) 무한 렌더링 원인과 방지

const [count, setCount] = useState(0); const handlecart= (item) => {          setCount(count+1);          setItem(item); }

무한 렌더링을 유발하는 코드

<button onClick={handlecart(item)}>cart</button>

 

위의 코드는 handlecart 함수의 참조를 패스하는게 아니라 함수 자체를 호출하고 있다. 
따라서 인위적으로 클릭하기 전에 인터프리터가 코드를 파스할 시에 함수를 실행하게 된다. 이로인해 함수내에서 스테이트는 업데이트되고 화면은 다시 렌더링하게 되서 무한 루프에 빠지게 된다.   

따라서 해결책은 함수의 참조를 설정하는 것이다.

<button onClick={() => handlecart(product)}>cart</button>