리액트 onClick 사용 시 주의 사항

onClick={setCount(count + 1)} ...

: ❌

onClick={() => setCount(count + 1)} ...

: ⭕️

Why?

전자의 경우, 함수를 실행하는 코드이므로 컴포넌트가 렌더링 되는 동시에 실행이 된다. 따라서, 렌더링 될 때 count 가 1 증가 하는데, state 가 변경되니 컴포넌트가 다시 렌더링 됨
하지만,
다시 렌더링 -> 또 count가 1 올라감 -> state 변경 -> 또 다시 렌더링

계속 이런 현상이 반복 되면 무한 루프.

How can fix?

1. onClick 전용 함수를 만들어 따로 빼서 사용

const sc = () => setCount(count + 1)
or
function sc() { setCount(count + 1) }

onClick={sc}

요로코롬 사용해 함수가 즉시 실행되는 것을 방지하고, 사용자가 클릭했을 때만 호출 되도록 한다.

2. onClick에 직접 콜백함수를 넣어 사용

onClick={()=>{
	const sc = () => setCount(count + 1);
    sc();
}}

3. onClick에 콜백 함수의 형태로 함수를 넣어주는 방법

onClick={() => setCount(count + 1)}

컴포넌트가 렌더링 되었을 때 바로 실행되지 않고 클릭 시에만 호출된다.

출처
https://infiduk.github.io/2022/09/08/react-onclick.html