onClick 사용시 질문입니다!

작성한 질문수 17

0

안녕하세요 이정환입니다.
onClick과 같은 on 접두사가 붙은 이벤트핸들러를 사용할 때에는
"함수 자체를 Props로 전달한다" 또는 "콜백함수로 전달한다"라는 느낌으로 전달하시면 됩니다.

따라서 아래의 형태를 비교해보시면 이해하시기 보다 쉬울겁니다.

1. ❌ onClick={someFunction()}

2. ✅ onClick={someFunction}

3. ✅ onClick={() => {someFunciton()}}

4. ✅ onClick={()=>someFunction()}

1번의 경우 someFunction 함수를 이벤트 핸들러로 전달하는게 아니라, someFunction 함수의 결과값을 이벤트 핸들러로 전달하고 있기 때문에 이렇게 하시면 안됩니다.

0

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

onClick 이벤트를 사용할 때에는 일반적으로 클릭할 때 실행될 함수를 지정해줍니다.
만약 클릭 이벤트에 함수가 파라미터를 받지 않는다면 onClick={함수명} 형식으로 사용하시면 됩니다. 이때 함수는 클릭 이벤트가 발생할 때 자동으로 실행됩니다.

하지만 클릭 이벤트에 함수가 파라미터를 받아야 한다면 onClick={() => 함수명(파라미터)} 형식으로 사용하시면 됩니다. 이때 괄호 안에 파라미터를 넣어주시면 클릭 이벤트가 발생할 때 해당 함수와 파라미터가 함께 실행됩니다.

콜백 함수에 대한 자세한 이해를 돕기 위해 콜백 함수에 관한 영상을 찾아보는 것도 좋은 방법입니다. 온라인 프로그래밍 컨텐츠나 자바스크립트 관련 포럼에서 자세한 설명을 찾아보시면 도움이 될 것입니다.

추가적으로 리액트에서 onClick 이벤트 사용 시에는 이벤트 핸들러를 바로 작성하는 것이 아니라, 함수를 전달하는 방식을 권장합니다. 이유는 함수를 전달하면 불필요한 리랜더링이 발생하지 않기 때문입니다.

더 궁금한 점이 있다면 언제든지 물어보세요. 좋은 하루 보내세요!