React 버튼을 누르기 전 Too many re-renders가 뜨는 이유, onClick 실행 시점 구분

React 화면을 열자마자 Too many re-renders. React limits the number of renders to prevent an infinite loop.가 뜨면 useEffect부터 지우지 않는다. 먼저 JSX의 onClick, onChange, onSubmit에 함수 이름이 아니라 함수 호출 결과를 넣었는지 확인한다.

onClick={save()}는 클릭을 기다리지 않는다. 컴포넌트를 렌더하는 순간 save를 실행한다. 그 안의 setter가 다음 렌더를 요청하고, 새 렌더가 다시 save()를 호출하면 반복이 시작된다. onClick={save}처럼 함수를 넘기거나 인수가 필요하면 onClick={() => save(id)}처럼 감싸야 한다.

Tap to zoom

onClick의 괄호를 빼서 클릭 뒤에 실행한다

잘못된 코드는 버튼을 만들면서 setCount를 실행한다.

// 잘못된 예: 렌더 중 실행
<button onClick={setCount(count + 1)}>증가</button>

클릭할 때 실행할 함수를 넘긴다.

// 올바른 예: 클릭 뒤 실행
<button onClick={() => setCount((current) => current + 1)}>
  증가
</button>

React의 이벤트 문서는 이벤트 핸들러를 호출하지 말고 전달하라고 설명한다. JSX 안의 괄호는 작은 문법 차이가 아니라 실행 시점을 렌더로 앞당기는 신호다.

Console에서 첫 setter 호출을 찾는다

이벤트 prop이 정상이라면 브라우저 Console에서 오류 옆 화살표를 열고 stack을 본다. React 공식 useState 문서도 stack에서 문제를 일으킨 구체적인 set 호출을 찾으라고 안내한다.

React useState 문제 해결 문서는 stack에서 문제를 일으킨 구체적인 setter를 찾으라고 안내한다. 컴포넌트 함수 본문에 다음 패턴이 있는지 확인한다.

function Profile({ user }) {
  const [name, setName] = useState('')

  // 잘못된 예: 렌더마다 조건 없이 setter 호출
  setName(user.name)

  return <p>{name}</p>
}

화면에 표시할 값이 user.name에서 바로 계산된다면 state를 없애는 편이 낫다.

function Profile({ user }) {
  return <p>{user.name}</p>
}

사용자 행동 뒤에만 바뀌어야 하는 값이라면 setter를 클릭, 입력, 제출 핸들러로 옮긴다. AI가 수정 범위를 넓히기 시작하면 바뀐 파일과 위험 변경을 먼저 보는 기준을 함께 적용한다.

Tap to zoom

새로고침과 클릭을 나눠 검증한다

수정 뒤에는 두 상태를 따로 확인한다.

1. 페이지를 새로고침해도 Console에 Too many re-renders가 나오지 않는다.
2. 아무것도 누르지 않았을 때 state가 바뀌지 않는다.
3. 버튼을 한 번 누르면 의도한 값이 한 번 바뀐다.
4. 연속 클릭이 이전 값 기준으로 누적돼야 하면 함수형 updater를 쓴다.

새로고침은 안정적인데 클릭 한 번에 핸들러가 두 번 실행된다면 React onClick이 두 번 실행될 때 확인할 경로를 본다. 오류 문구와 재현 시점이 다르면 수정할 위치도 달라진다.

Effect가 반복된다면 다른 고리를 찾는다

Too many re-renders는 주로 렌더 중 무조건 setter를 호출할 때 찾는다. 반면 화면이 한 번 나온 뒤 Effect가 계속 state를 바꾸며 Maximum update depth exceeded가 뜬다면 의존성 배열과 Effect 안의 업데이트를 확인해야 한다.

오늘은 Console stack에서 첫 set... 호출 하나만 찾는다. 렌더 본문에서 값을 바로 계산할 수 있으면 state를 없애고, 사용자 행동이 필요한 변경이면 이벤트 함수 뒤로 옮긴다. 새로고침은 조용하고 클릭 뒤에만 값이 바뀌면 수정이 끝난다.

이 글은 AI 코딩과 개발 학습의 일반 정보 제공 목적입니다. 도구, 모델, 커리큘럼, 요금은 버전과 시점에 따라 달라질 수 있으므로 실습이나 도입 전 공식 문서와 최신 릴리스 노트를 확인하세요.

참고 출처

• useState 문제 해결 (React)
• 이벤트에 응답하기 (React)