onClick 사용시 질문입니다!

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

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

1. ❌ onClick={someFunction()}

2. ✅ onClick={someFunction}

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

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

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

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

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

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

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

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

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