[React] React onClick에 여러 함수를 넣고 싶다면 (+주의사항)

React onClick할 때 여러 동작을 붙이고 싶은 경우가 많다. 처음에 많이 당황스러웠던 에러는 onClick에 함수 두 개 넣었을 때 예상치도 못했는데 에러가 무한으로 발생했을 때. 이런 간단한 코드에서 에러가 발생하다니 난 바보야.. 같은 생각 들면서 당황스러웠더랬지.. 그럼 이럴 때는 어떻게 하면 되는지 침착하게 알아보자.

함수 하나일 때와 여러 개일 때의 차이점은?

단순하게 설명하자면 함수 하나일 때와 여러 개일 때의 차이는 바로 () => {} 유무이다.
당연하게도 onClick에 여러 함수를 넣었을 때, 그냥 무작정 코드 추가만 하게 되면 에러가 발생한다. 실수로 놓칠 때도 있었고 알고 나서도 꽤 많은 에러가 여기서 났었다. 이 정도 실수는 다신 안해 싶을 때 또 찾아오는 에러.. 방심은 금물!
아래는 각각 함수 하나일 때, 여러 개일 때의 예시이다.

Single Function

<button onClick={() => setIsLogged(true)}>로그인</button>

Multiple Function

<button onClick={() => {
  setIsLogged(true);
  history.push('/main');
}}>로그인</button>

그럼 왜 내 코드는 에러가 났을까? 아래는 에러가 나는 코드의 예시이다.

이렇게 하면 에러가 난다.

<button onClick={setIsLogged(true)}>로그인</button>

왜 onClick={setIsLogged(true)}는 안 될까?

onClick={Login()} 처럼 코드를 짤 경우, 함수를 실행하므로 렌더링됨과 동시에 함수가 실행된다.
즉, Login() 함수 내부에서 상태가 변경이 되면 컴포넌트가 리렌더링되고, 리렌더링됨에 따라 또 Login() 함수 내부에서 상태가 변경되고, 그럼 또 리렌더링되고... 무한 루프에 빠지게 된다.

그럼 어떻게 하는 게 좋을까?

클릭했을 때 이벤트를 핸들링할 onClick 관련 함수를 만들어서 사용한다. 이 때, 여러 개의 함수를 중복 호출하는 것보다 기능을 잘 설명할 수 있는 함수 네이밍을 정한 뒤, 그 함수 안에 관련 동작들을 처리하는 것이 가독성 측면에서 좋다.
아래처럼 간단한 예시를 만들어보았는데, 우선 clickLoginButton 함수를 만든 뒤, 함수 내부에서는 원하는 로직을 추가한다. 나는 로그인 여부 상태를 저장하는 setIsLogged()와, 로그인 후 메인화면으로 페이지를 이동시키도록 history.push()를 수행하도록 했다. 아래처럼 이렇게 함수가 즉시 실행되는 것을 방지하여 클릭 시에만 호출되도록 하면 된다.

// 로그인 버튼 클릭 함수
const clickLoginButton = () => {
  setIsLogged(true);
  history.push('/main');
}

<div onClick={clickLoginButton}>로그인</div>

물론 이렇게 콜백 함수의 형태로 onClick에 직접 넣어 사용하는 것도 가능하다.

<div onClick={() => clickLoginButton()}>로그인</div>