인프런 커뮤니티 질문&답변
작성한 질문수
이벤트헨들러)화살표함수 안에 함수를 넣는 이유가 어렵습니다 ㅠㅠ
해결된 질문
24.08.27 21:34 작성
·
90
0
onClick에 onClickButton(-10) 이 아닌 화살표 함수를 이벤트 핸들러로 설정하고 그 안에 호출하는 이유가 어렵습니다 ㅜㅜ
5.5)이벤트처리하기, 6.3) 기능구현하기 강의에서 함수호출의 결과를 넣으면 안되고 인수를 넘기기 위해서 라고 하셨는데 바로 onClickButton(1)를 왜 넣으면 안되는지 모르겠어요,, 자바스크립트만 하다 리액트 하려니 헷깔리네여 ㅜㅜ
<button
onClick={() => {
onClickButton(-10);
}}
>
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨
질문 하시기 전에 꼭 확인해주세요
- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)
- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)
- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)
질문 하실때 꼭 확인하세요
- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)
- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)
- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)
- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요
- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
답변 2
0
2024. 08. 28. 11:40
안녕하세요 이정환입니다.
<button onClick={ onClickButton(-1);} > // 1번 형태
<button onClick={() => { onClickButton(-1); }} > // 2번 형태1번과 2번 형태의 onClick 이벤트핸들러 설정의 차이를 질문하셨는데요 어떻게 다른지 순서대로 살펴보겠습니다 !_!
1번 형태
<button onClick={ onClickButton(-1);} > // 1번 형태button 태그의 onClick 이벤트 핸들러로 onClickButton(-1)을 전달했습니다.
이때 onClickButton(-1)은 함수 호출의 결과값을 의미합니다. 그러므로 현재 button 태그의 onClick 이벤트 핸들러로 설정된 것은 onClickButton(-1)의 결과값일 겁니다.
이것은 마치 const a = onClickButton(-1); 같은 코드가 있을 때 a의 값이 onClickButton 함수를 호출하고 인수로 -1을 전달한 결과인 것과 동일한 원리입니다. 즉 함수 호출 결과를 변수에 담는 것과 동일한 방식이라고 생각하시면 될 것 같네요
그러나 이벤트 핸들러로는 값이 아닌 함수자체를 설정해줘야 합니다. 마치 콜백함수를 전달 하듯이 말이죠 그래야만 이벤트가 발생했을 때 호출할 수 있기 때문입니다.
따라서 1번 방식으로 이벤트 핸들러를 설정하는 것은 불가능 한 것입니다. 이것은 이벤트 핸들러 역할을 할 함수를 설정하는게 아니라 그냥 onClick이라는 Props로 onClickButton 함수의 호출 결과를 전달한 것이기 때문입니다. 따라서 우리는 2번 형태를 활용해야 합니다.
2번 형태
<button onClick={() => { onClickButton(-1); }} > // 2번 형태2번 형태에서는 button 태그의 onClick 이벤트 핸들러로 화살표 함수를 설정해주었습니다. 마치 콜백함수를 전달하듯 말이죠
따라서 이제 button 태그가 클릭되면 해당 화살표 함수가 실행됩니다. 그리고 이 화살표 함수가 실행되면 onClickButton을 호출하고 -1을 전달하게 됩니다. 결과적으로 우리가 원하는대로 동작하게 됩니다.
이해가 되셨나요? 결론적으로 다시 한번 정리하자면!
이벤트 핸들러로 화살표 함수를 만들어 넘겨주는 이유는 이벤트가 발생했을 때에 실행할 "함수 자체"를 넘겨주기 위함입니다.
그렇지 않고 그냥 함수 호출의 결과값을 이벤트 핸들러로 넘겨주면 이는 값을 넘긴 꼴이 되기 때문에 이벤트가 발생했을때 적절히 함수를 호출하지 못하게 됩니다.
0
2024. 08. 27. 21:36
안녕하세요, 인프런 AI 인턴입니다.
dlrkxks1028님, 이벤트 핸들러에서 직접 함수를 호출하는 것이 아니라 화살표 함수 내에서 함수를 호출하는 이유에 대해 궁금하신 것으로 이해했습니다. 이와 관련하여 “화살표 함수 안에 함수를 넣는 이유”에 대해 설명드리겠습니다.
React에서 이벤트 핸들러에 함수를 직접적으로 넣는 경우(onClick={onClickButton(-10)})와 화살표 함수를 통해 호출하는 경우(onClick={() => onClickButton(-10)}) 사이에는 중요한 차이가 있습니다. 직접 함수를 호출하는 방식은 리액트가 해당 컴포넌트를 렌더링 하는 순간 함수가 실행되어 버리는 결과를 초래합니다. 이로 인해 예상치 못한 동작이나 에러가 발생할 수 있습니다.
반면, 화살표 함수(() =>)를 사용하여 onClick 핸들러 내에서 함수를 호출(onClickButton)하면, 사용자가 실제로 해당 이벤트(이 경우는 클릭)를 발생시켰을 때만 함수가 실행됩니다. 즉, 화살표 함수는 호출될 함수를 “래핑”하여 이벤트가 실제로 발생했을 때만 함수가 실행되도록 합니다. 이런 방식을 통해 불필요한 함수 실행을 방지하고, 인수를 해당 함수에 전달할 수 있게 해줍니다.
이에 대한 자세한 설명은 다음 링크에서 확인하실 수 있습니다:
이 답변은 이벤트 핸들러 내에서 함수를 호출하는 방식과 관련하여 React에서 권장되는 패턴을 설명해줍니다. 질문하신 내용과 직접적으로 관련된 부분에 대한 설명이 포함되어 있으니 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.