[React] props로 함수를 넘겨줄때 주의 할 사항

const [squares, setSquares] = useState(Array(9).fill(null));

const handleClick = (i) => {
	const nextSquares  =squares.slice();
    nextSquares[i] = "X";
    setSquares(nextSquares);
};

.
.
.

<Square value={squares[0]} onSquareClick={handleClick(0)} />

위와 같이 함수를 인수로 전달하게 되면 작동하지 않는다. 

handleClick(0)은 setSquares를 호출하고 setSquares를 호출하면 App 컴포넌트의 state를 변경하는 것이기 때문에 App 컴포넌트가 '리렌더링'된다. 

 

하지만 이 리렌더링 과정에서 다시 handleClick(0)은 호출되고 무한 루프에 빠진 것이다.

 

즉, handleClick(0)를 호출하는 것은 App 컴포넌트를 호출하는 것과 같고 현재 handleClick은 호출되면서 setSquare를 통해 state를 변경하였다. 

 

따라서 App 컴포넌트의 '리렌더링'이 발생했다.

 

 하지만 이런식으로 함수를 인자로 넘져주면 모든 틱택토 박스에서 App 컴포넌트의 리렌더링이 발생한다... on and on

 

근데 그냥 handleClick 이렇게만 인자로 전달해주었을 때는 이런 오류가 발생하지 않았다. (handleClick(0)처럼 함수를 호출한 것이 아니기 때문) 

 

근데 handleClick(0)은 우리가 클릭하지도 않았는데 함수를 호출하는 것.

 

📌해결 방법
"화살표 함수 사용"

<Square value={squares[0]} onSquareClick={() => handleClick(0)} />

화살표 함수를 사용하면 무한 리렌더링 문제를 해결할 수 있음. 

 

네모 박스가 클릭 되면 뒤에 배치된 handleClick(0)이 호출 된다.