[React] 이벤트 핸들러에 함수와 인자를 함께 전달할 때 화살표 함수를 사용해야 하는 이유

What

JavaScript에서 이벤트 핸들러에 함수와 인자를 함께 전달할 때 주의해야 하는 이유는 실행 시점과 스코프에 관련이 있다. 예를 들어, 다음과 같은 코드가 있다고 가정해보자

<button onClick={Selected(index)}>Click me</button>

 

Why

이 코드는 문제가 된다.

이유는 버튼이 렌더링될 때 Selected(index)가 즉시 호출되고, 해당 함수의 반환값이 onClick 이벤트 핸들러로 설정되기 때문이다.

렌더링 될 때 함수가 즉시 호출되면 버튼을 클릭하지 않아도 Selected(index)가 이미 실행되어 상태를 업데이트하거나 다른 작업을 수행할 수 있으므로 이는 의도하지 않은 동작으로 이어질 수 있다.

 

How

화살표 함수를 사용하면 이 문제를 해결할 수 있습니다.

화살표 함수는 함수 정의를 감싸는데, 버튼을 클릭할 때만 함수가 호출된다.

예를 들어, 다음과 같은 코드가 있다고 가정해보자

<button onClick={() => Selected(index)}>Click me</button>

이렇게 하면 버튼 클릭 시에만 Selected(index)가 호출되므로 예기치 않은 동작을 방지할 수 있습니다.

즉, 함수와 인자를 함께 사용할 때 화살표 함수를 사용하면 함수 호출을 지연시키고 의도한 시점에서만 실행할 수 있다

때문에 일반적으로 React 컴포넌트에서 이벤트 핸들러를 설정할 때 유용하게 사용된다.