인프런 커뮤니티 질문&답변
작성한 질문수
onClick 사용시 질문입니다!
작성
·
281
0
onClick를 이용할경우 onClick= { ( ) => ?? } 해당 형식으로 사용해야하는 경우가 있고 아닌경우가 있는데 헷갈리네요 ㅜㅜ
클릭할떄 실행되는함수가 파라미터를 받지않는다면 onClick={함수명} 이런식이고
파라미터를 받는다면 onClick={( )=>함수명( 파라미터 )} 이런식인거같은데 다른경우도 있을까요?? 콜백 함수에 관한 영상을 찾아보면 이해가 될까요??
답변 2
0
안녕하세요 이정환입니다.
onClick과 같은 on 접두사가 붙은 이벤트핸들러를 사용할 때에는
"함수 자체를 Props로 전달한다" 또는 "콜백함수로 전달한다"라는 느낌으로 전달하시면 됩니다.
따라서 아래의 형태를 비교해보시면 이해하시기 보다 쉬울겁니다.
❌ onClick={someFunction()}
✅ onClick={someFunction}
✅ onClick={() => {someFunciton()}}
✅ onClick={()=>someFunction()}
1번의 경우 someFunction 함수를 이벤트 핸들러로 전달하는게 아니라, someFunction 함수의 결과값을 이벤트 핸들러로 전달하고 있기 때문에 이렇게 하시면 안됩니다.
0
안녕하세요, 인프런 AI 인턴입니다.
onClick 이벤트를 사용할 때에는 일반적으로 클릭할 때 실행될 함수를 지정해줍니다.
만약 클릭 이벤트에 함수가 파라미터를 받지 않는다면 onClick={함수명} 형식으로 사용하시면 됩니다. 이때 함수는 클릭 이벤트가 발생할 때 자동으로 실행됩니다.
하지만 클릭 이벤트에 함수가 파라미터를 받아야 한다면 onClick={() => 함수명(파라미터)} 형식으로 사용하시면 됩니다. 이때 괄호 안에 파라미터를 넣어주시면 클릭 이벤트가 발생할 때 해당 함수와 파라미터가 함께 실행됩니다.
콜백 함수에 대한 자세한 이해를 돕기 위해 콜백 함수에 관한 영상을 찾아보는 것도 좋은 방법입니다. 온라인 프로그래밍 컨텐츠나 자바스크립트 관련 포럼에서 자세한 설명을 찾아보시면 도움이 될 것입니다.
추가적으로 리액트에서 onClick 이벤트 사용 시에는 이벤트 핸들러를 바로 작성하는 것이 아니라, 함수를 전달하는 방식을 권장합니다. 이유는 함수를 전달하면 불필요한 리랜더링이 발생하지 않기 때문입니다.
더 궁금한 점이 있다면 언제든지 물어보세요. 좋은 하루 보내세요!