[React] onClick = {함수}와 onClick = {() => 함수}의 차이

onClick = {함수}일 때에는

Too many re-renders. React limits the number of renders to prevent an infinite loop.

문제가 발생했었는데, 

 

onClick = {() => 함수}로 바꾸니깐 문제가 해결되는 상황이 일어났다.

 

두 방법이 무슨 차이일지 궁금해서 지피티한테 물어봤다.

 

지피티 대답

 

두 방법의 차이점

1. onClick = {함수}: - 이 방법은 이벤트가 발생했을 때 직접 함수를 참조하는 방식입니다.
예를 들어, onClick = {handleClick}라고 하면 handleClick 함수가 이벤트 핸들러로 설정됩니다.

여기서 중요한 점은 React가 리렌더링될 때마다 handleClick 함수가 변경되지 않는다면, 동일한 함수를 참조합니다. 
2. onClick = {() => 함수}: 
이 방법은 화살표 함수를 사용하여 새로운 함수를 생성하는 방식입니다. 

예를 들어, onClick = {() => handleClick()}라고 하면 새로운 익명 함수가 생성되어 이 함수가 실행될 때 handleClick 함수를 호출합니다. 
리렌더링이 발생할 때마다 새로운 함수가 생성됩니다. 

문제가 해결된 이유

1. 리렌더링 문제: 
onClick = {함수}를 사용할 때, 만약 handleClick 함수가 변경되지 않는다면 문제가 되지 않지만, 만약 이 함수가 props나 state에 의존하는 경우, 해당 의존성이 변경될 때마다 새로운 함수가 필요할 수 있습니다. 
이러한 경우, onClick = {() => 함수}로 작성하면 매 리렌더링 시 새로운 함수가 생성되므로 최신의 props나 state를 사용할 수 있습니다. 
2. 불필요한 리렌더링 방지: 
컴포넌트가 리렌더링될 때, onClick = {함수} 방식은 항상 동일한 함수 참조를 유지하기 때문에 문제가 될 수 있는 부분은 리렌더링 과정에서 특정 조건이 만족되지 않아야 하는 경우입니다. 
반면에 onClick = {() => 함수} 방식은 매번 새로운 함수를 생성하므로 최신 값을 사용할 수 있으며, 의도치 않은 리렌더링이 방지될 수 있습니다. 
3. 이벤트 핸들러의 동적 생성: 
특정 상황에서 이벤트 핸들러를 동적으로 생성해야 할 때가 있습니다. 이 경우 onClick = {() => 함수}는 매번 새로운 핸들러를 생성하여 해당 상황에 맞게 동작할 수 있게 합니다. 
예를 들어, handleClick 함수가 내부적으로 props나 state를 참조할 때, onClick = {handleClick}는 이전의 값을 참조할 수 있지만, onClick = {() => handleClick()}는 최신의 값을 참조하게 됩니다. 

결론

onClick = {() => 함수} 방식은 새로운 함수를 매번 생성하여 최신의 props나 state를 참조하게 함으로써, 
특정 상황에서 발생할 수 있는 리렌더링 문제나 불필요한 함수 참조 문제를 해결할 수 있습니다.

 

내가 이해한 내용

 

onClick = {함수}에서 함수가 state나 props를 변화하면 다시 렌더링 되고, 다시 함수를 실행하려하면 다시 변화시키니깐 다시 렌더링되는 무한 렌더링 현상이 일어난다.

그러나 onClick = {() => 함수}는 이벤트가 일어난 시점의 함수를 참조하므로 함수가 state나 props를 변화시키더라도 그대로 문제없이 진행한다.