react onClick 정리

리액트에서 onClick 함수를 사용하다보면 화살표 함수를 통한 이벤트와 함수명만을 사용한 이벤트를 볼 수 있다.
예로 들자면

<Button
  size='medium'
  scheme={item.isActive ? "primary" : "normal"}
  key={item.id}
  onClick={() => handleCategory(item.id)}
  >
  {item.category_name}
</Button>

<Button
  size='medium'
  scheme={searchParams.get(QUERYSTRING.NEWS) ? "primary" : "normal"}
  onClick={handleNews}
  >
  신간
</Button>

이렇게 두 버튼의 함수가 있다고 하자. 당연하게도 둘다 작동한다. onClick으로 호출하는 함수를 살펴보면 하나는 인자를 받고 하나는 인자를 받지 않는다. 그래서 인자를 받는 함수는 화살표함수로 작성하고, 그게 아니면 함수명만을 사용하였었다.

함수명만 사용하기 vs 익명함수로 감싸기

아래 예시코드를 가져와봤다.

const handleDeleteClick = () => onDelete(item.id);
<button onClick={handleDeleteClick}>삭제</button>

<button onClick={onDelete(item.id)}>삭제</button> 

1. 일반적으로 onClick시 할당된 함수를 실행시키고 싶다.
2. 화면이 렌더링될때 onClick에 함수를 지정하는데 전자는 handleDeleteClick 함수를 참조시키고 후자는 onDelete(item.id) 함수를 즉시 호출해 반환한 값을 이벤트 핸들러로 보낸다.

예전 onClick을 제일 처음 배울때

... onClick={setCount(count + 1)} ...

이 코드의 문제점과 똑같다. 컴포넌트 렌더링 시에 함수를 호출하기 때문에 클릭도 하지않았지만 count가 1 증가하는 것과 같은 오류다.
결국 우리는 onClick 시에 함수를 호출시켜야하기때문에 렌더링 시에 함수 호출을 막아야한다. 그러므로 함수명만을 기입하는 함수 참조를 사용하거나 익명의 콜백함수를 만들면 렌더링 시에 함수가 호출되지않는다.