React 비기너: 튼튼한 기본 만들기 / 섹션 23. React Event / 2. 이벤트 핸들러 작성

Question

버튼 컴포넌트 onClick={handleClick()} jsx 에서 위처럼 적으면 자바스크립트에서 엔진에서 즉시실행함수로 인식하는것 처럼 인식을 해서 렌더링이 되기도전에 함수를 먼저 실행해버리는 현상이 생기는 이유가 맞을까요? 결국 핸들러 함수의 기능도 하지못하고 1회용으로 즉시실행되고 소멸해버리는 함수가 되어버리는 것 같아보이는데 이에 대한 정확한 설명이 있을까요? 제가 생각한 이 부분에 보충적으로 필요한 설명을 혹시 해주실 수 있으실까요?

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 지금중님. React에서 이벤트 핸들러를 설정할 때 onClick={handleClick()} 와 같은 형식으로 작성하시면, handleClick 함수가 즉시 실행되어 그 반환값이 이벤트 핸들러로 설정되는 문제가 발생합니다. 이렇게 되면 컴포넌트가 렌더링될 때마다 함수가 실행되고, 의도한 대로 버튼을 클릭했을 때가 아니라 렌더링 시점에 바로 한 번 실행되게 되어버립니다. 이 문제를 해결하기 위해서는 함수의 참조를 전달해야 합니다. 아래와 같이 작성해야 정상적으로 작동됩니다: 위처럼 handleClick 을 함수 호출 없이 이름만 전달하면, 버튼 클릭 시점에만 함수가 호출되게 됩니다. React에서는 이 방식으로 이벤트 핸들러를 설정하는 것이 일반적입니다. 관련 질문 및 추가 설명 onClick={handleClick} : 함수의 참조를 전달하여 클릭 시 함수가 호출됩니다. onClick={() => handleClick()} : 새로운 익명 함수를 만들어 클릭 시 해당 함수가 호출되어 그 안에서 handleClick 이 실행됩니다. 이 방법은 때때로 매개변수를 전달할 필요가 있을 때 유용합니다. 하지만 주의할 점은, 리렌더링마다 새로운 함수가 생성되기 때문에 과도한 사용은 성능에 영향을 줄 수 있습니다. 이로 인해 발생할 수 있는 여러 상황과 핸들링 방법에 대한 예제를 살펴보실 수 있는 게시물을 추천드립니다. 다음 링크를 참고해 보시기 바랍니다: React에서 이벤트 핸들러 관련 올바른 사용법에 대한 질문 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.