이건 내가 꽤나 최근에 알아낸 사실이다.
난 전공자도 아니고 독학으로 JS를 배워서 코드를 읽는 것도 어려워했다. 근데 React에 와서 Props로 함수를 넘겨줄 때에, 화살표 함수로 감쌀 때도 있고 그냥 넘길 때도 있고 당최 무슨 기준으로 이걸 정하는지 몰랐었다. 근데 최근에 와서 알아냈기 때문에 글로 남긴다.

핸들러에 매개변수를 넘기기

결론만 말하자면 매개변수를 받는 함수는 화살표 함수로 감싸고, 인자를 받지 않는 함수는 함수 이름만 적는다. 아래의 코드를 보자.

const CountApp = () => {
  const [count, setCount] = useState(0);

  const onIncrease = (n) => {
    setCount(count + n);
  }
  const onDecrease = () => {
    setCount(count - 1);
  }

  return(
    <>
      <p>count: {count}</p>
      // 매개변수를 받는 핸들러
      <button onClick={() => onIncrease(3)}>3 증가</button>
      // 매개변수를 받지 않는 핸들러
      <button onClick={onDecrease}1 감소</button>
    </>
  );
}

이게 다였다. 알고 나니까 개운하면서도 허탈했다. 아무리 구글에 검색해봐도 안 나왔는데, 너무 당연한 내용이라서 검색결과가 없었는지, 내가 검색 키워드를 잘못 입력했는지 모르겠다. 아마 전자라고 생각한다.

만일 <button onClick={onIncrease(3)} />과 같이 작성한다면 CountApp이 마운트 될 때에 onClick 내부의 표현식을 실행함과 동시에 onIncrease(3)함수가 실행된다. 그래서 고차함수로 감싸줘서 () => onIncrease(3)이 실행되면 화살표 함수는 onIncrease(3)을 return하게 되는 것이다.
물론 이렇게 인라인 방식으로 핸들러를 작성하게 되면 렌더링될 때마다 함수의 참조를 새로 만들게 되니 useCallback함수를 사용해야 할 것이다.