인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다. 지금중님.

React에서 이벤트 핸들러를 설정할 때 onClick={handleClick()}와 같은 형식으로 작성하시면, handleClick 함수가 즉시 실행되어 그 반환값이 이벤트 핸들러로 설정되는 문제가 발생합니다. 이렇게 되면 컴포넌트가 렌더링될 때마다 함수가 실행되고, 의도한 대로 버튼을 클릭했을 때가 아니라 렌더링 시점에 바로 한 번 실행되게 되어버립니다.

이 문제를 해결하기 위해서는 함수의 참조를 전달해야 합니다. 아래와 같이 작성해야 정상적으로 작동됩니다:

<button onClick={handleClick}>
  버튼
</button>

위처럼 handleClick을 함수 호출 없이 이름만 전달하면, 버튼 클릭 시점에만 함수가 호출되게 됩니다. React에서는 이 방식으로 이벤트 핸들러를 설정하는 것이 일반적입니다.

관련 질문 및 추가 설명

• onClick={handleClick}: 함수의 참조를 전달하여 클릭 시 함수가 호출됩니다.
  
• onClick={() => handleClick()}: 새로운 익명 함수를 만들어 클릭 시 해당 함수가 호출되어 그 안에서 handleClick이 실행됩니다. 이 방법은 때때로 매개변수를 전달할 필요가 있을 때 유용합니다. 하지만 주의할 점은, 리렌더링마다 새로운 함수가 생성되기 때문에 과도한 사용은 성능에 영향을 줄 수 있습니다.
  

이로 인해 발생할 수 있는 여러 상황과 핸들링 방법에 대한 예제를 살펴보실 수 있는 게시물을 추천드립니다. 다음 링크를 참고해 보시기 바랍니다:

• React에서 이벤트 핸들러 관련 올바른 사용법에 대한 질문
  

---

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.