이벤트리스너 함수를 지정할 때, 화살표 함수와 그냥 함수의 차이

따라하며 배우는 리액트 A-Z[19버전 반영]

TailWindCss로 Todo 앱 스타일링 해주기

해결된 질문

작성

564

안녕하세요. 현재 섹션 3 수강 중인 수강생입니다.

todo App을 만들고 있는데, X 버튼 구현하는 부분에서 onClick 이벤트 발생 시 작동하는 함수를 삽입해주는 부분인데요.

onClick => {handleClick(data.id)}

이렇게 입력하니 웹페이지가 제대로 동작하지 않고, 아래처럼 화살표 함수로 바꿔주니 정상적으로 동작합니다.

<button onClick={() => handleClick(data.id)}> x </button>

찾아보니 함수명으로 넣어주는 경우는 렌더링 시 함수가 바로 실행되고 click 이벤트 발생 시엔 함수의 반환값이 중괄호 안에 들어간다고 하고, 화살표 함수로 넣어줄 경우 의도한대로 click이벤트 발생 시에 함수가 실행된다는 걸 알게됐는데요,

이런 부분은 리액트 동작 원리 상 이렇게 되는거니 그냥 받아들이면 될까요? 아니면 제가 js 문법에 대해 이해가 부족해서 이해가 안가는 걸까요...?
추가적으로, 그렇다면 리액트에서 이벤트리스너 함수를 넣을 때는 무조건 화살표 함수로 넣는게 맞는건가요?

답변 2

지식공유자

안녕하세요 민희 님

민희 님이 말씀해 주신 대로 이 부분은 문법 부분입니다.

그래서 만약 함수에 특정한 인수를 넣어줘야 한다고 하면 onClick={() => function("a")} 이렇게 사용해주시되며

그렇지 않다면 onClick={functionName} 이렇게만 넣어서 사용해 주시면 됩니다.

감사합니다.

안녕하세요, 인프런 AI 인턴입니다.

김민희님, React에서의 이벤트 핸들링에 관한 질문 주셔서 감사합니다. 답변 드리겠습니다.

리액트 동작 원리 상 onClick과 같은 이벤트 핸들러에 바로 함수를 지정하면 그 함수가 렌더링 시 바로 호출됩니다. 즉, onClick={handleClick(data.id)} 이렇게 작성하시면, 렌더링 시 handleClick 함수가 즉시 실행되어 그 반환값을 이벤트 핸들러로 설정하게 되죠. 이것은 자바스크립트의 문법과 동작 방식에 대한 이해와 관련이 있으며, 리액트에서 이벤트를 다루는 특정 패턴입니다. 따라서, 자바스크립트 문법과 이벤트를 다루는 방식에 대한 이해가 필요합니다.
리액트에서 이벤트리스너 함수를 지정할 때 화살표 함수를 사용하는 것은 필수는 아닙니다. 필요에 따라서 화살표 함수를 사용하거나 다른 방법을 통해 이벤트 핸들러를 전달할 수 있습니다. 화살표 함수를 사용하는 이유 중 하나는 this 바인딩이 자동으로 설정되기 때문인데, 특히 인자를 전달하며 호출할 필요가 있을 때 편리합니다. 화살표 함수는 함수를 새로 만들지 않고 바로 실행할 수 있도록 해주며, 이러한 경우에 유용합니다. 그러나 항상 화살표 함수를 사용해야 하는 것은 아니며, 상황에 맞는 방법을 선택하는 것이 중요합니다.

질문에 도움이 되셨기를 바랍니다. 동작 원리나 자바스크립트 문법에 대한 이해가 부족하다고 느끼시면 관련 문서나 자료를 참고하시는 것도 좋은 학습 방법입니다. React 관련 공식 문서나 다음 자료를 참고하시면 도움이 될 것입니다.

추가로 궁금한 점이 있다면 언제든 질문해 주세요. 공부에 많은 성과가 있기를 바랍니다!

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