React onClick 로그 안 찍힐 때 클릭 신호 추적법

AI가 만든 React 화면에서 버튼은 보이는데 눌러도 아무 변화가 없을 때가 있습니다. 이때 버튼 컴포넌트를 통째로 다시 만들기 전에 핸들러 첫 줄에 클릭 로그 하나를 넣으세요. Console에 로그가 안 찍히면 클릭 신호가 함수까지 오지 않은 것이고, 찍히면 버튼은 이미 제 역할을 한 것입니다.

첫 판단은 간단합니다. 로그가 안 찍히면 onClick·disabled·CSS를 보고, 로그가 찍히면 상태·API·화면 이동을 봅니다. 이 두 경우만 먼저 가르면 AI에게 고쳐 달라고 할 파일 범위도 작아집니다.

클릭 로그 하나로 두 경우를 먼저 가릅니다

React 이벤트 공식 문서는 JSX의 onClick에 이벤트 핸들러 함수를 넘겨 사용자 상호작용에 반응한다고 설명합니다. 아래처럼 핸들러 첫 줄에 관찰용 로그를 잠깐 넣습니다.

function SaveButton() {
  function handleClick() {
    console.log("button clicked");
    // 상태 변경, API 요청, 화면 이동은 이 아래에 있습니다.
  }

  return <button onClick={handleClick}>저장하기</button>;
}

브라우저 개발자 도구의 Console을 비우고 버튼을 한 번 누릅니다. Chrome DevTools 로그 문서처럼 console.log()로 남긴 메시지는 Console에서 확인할 수 있습니다.

button clicked가 안 보임: 클릭 전달이 핸들러 전에 끊겼습니다.
button clicked가 보임: 핸들러는 실행됐습니다. 그 아래 상태, 요청, 조건을 확인합니다.

로그 유무를 적지 않은 채 “버튼이 안 돼요”라고만 하면 AI는 CSS부터 API까지 한꺼번에 바꿀 수 있습니다. 먼저 끊긴 위치를 증거로 남기는 것이 수정의 시작입니다.

로그가 안 찍히면 클릭 전달을 확인합니다

로그가 없다면 핸들러 안의 코드는 아직 볼 차례가 아닙니다. 아래 세 지점을 순서대로 확인합니다.

onClick에 함수를 넘겼는지 봅니다

클릭할 때 실행할 함수는 보통 아래처럼 넘깁니다.

<button onClick={handleClick}>저장하기</button>

onClick={handleClick()}처럼 괄호를 붙이면 렌더링 중에 먼저 실행될 수 있습니다. 인자가 필요하면 클릭 시점까지 미루도록 화살표 함수로 감쌉니다.

<button onClick={() => handleClick(item.id)}>저장하기</button>

disabled 조건이 계속 참인지 봅니다

<button disabled={isLoading} onClick={handleClick}>
  저장하기
</button>

MDN disabled 속성 문서는 비활성화된 폼 컨트롤을 사용자가 조작하거나 포커스할 수 없다고 설명합니다. isLoading 초기값이 풀리지 않으면 클릭 로그도 찍히지 않습니다. 비활성 조건값을 먼저 출력한 뒤 이벤트 함수를 고치세요.

CSS와 덮는 요소가 클릭을 받는지 봅니다

.button-area {
  pointer-events: none;
}

MDN pointer-events 문서에 따르면 pointer-events: none인 요소는 포인터 이벤트의 대상이 되지 않습니다. 버튼이나 부모에 이 값이 있는지, position: absolute와 높은 z-index를 가진 투명한 요소가 버튼 위를 덮는지 개발자 도구의 요소 선택기로 확인합니다.

기본 <button>은 되는데 디자인용 <Button>만 안 된다면 일반 CSS 점검을 반복하지 마세요. 커스텀 Button의 prop 전달 두 곳을 확인하는 가이드에서 호출부 이름과 내부 <button onClick> 매핑을 비교할 수 있습니다.

로그가 찍히면 버튼 이후를 확인합니다

로그가 보인다면 클릭 신호는 핸들러까지 도착했습니다. 이때 onClick을 계속 바꾸면 이미 통과한 구간만 건드립니다. 핸들러의 다음 줄부터 관찰값을 하나씩 남깁니다.

async function handleClick() {
  console.log("button clicked");
  setSaving(true);
  console.log("saving state requested");

  const response = await saveItem();
  console.log("save response", response.status);
}

확인할 대상은 세 가지입니다.

setState 뒤에 렌더링 조건이 실제로 바뀌는가
API 요청이 시작되고 응답 상태를 받는가
성공 뒤 화면 이동이나 모달 닫기 조건이 참이 되는가

클릭 직후 화면이 새로고침되거나 입력값이 사라진다면 “무반응”과 다른 분기입니다. React 공식 문서도 폼 안의 버튼으로 발생한 submit 이벤트가 기본적으로 페이지를 다시 불러올 수 있다고 설명합니다. 단순 동작 버튼이라면 <button type="button">인지, 제출 버튼이라면 form onSubmit에서 preventDefault()가 필요한지 확인하세요. 자세한 구분은 React 폼 제출 뒤 새로고침을 막는 기준으로 이어집니다.

핵심은 로그가 찍힌 뒤에는 버튼보다 핸들러 결과를 보는 것입니다. 상태와 요청의 관찰값이 없다면 AI도 어느 줄까지 성공했는지 알 수 없습니다.

AI에게 관찰 결과 네 줄만 줍니다

전체 파일을 던지기 전에 아래 네 줄을 채웁니다.

React 버튼을 한 번 눌렀습니다.
Console의 "button clicked" 로그는 [찍힘/안 찍힘]입니다.
버튼 JSX와 부모 wrapper 또는 form 코드는 [관련 부분]입니다.
이 관찰 결과에 맞는 구간만 확인하고 최소 수정 한 곳과 재검증 방법을 알려 주세요.

로그가 안 찍혔다면 onClick, disabled, pointer-events, overlay만 보라고 범위를 제한합니다. 로그가 찍혔다면 핸들러 아래의 상태 변경, API 응답, 이동 조건만 보라고 적습니다. 서로 다른 두 범위를 한 번에 고치지 않는 것이 재검증을 쉽게 만듭니다.

수정 뒤에는 같은 조건으로 버튼을 다시 한 번 누릅니다. 클릭 로그가 한 번 찍히고, 기대한 화면 변화나 응답 상태까지 확인되면 작업을 끝냅니다. 로그만 찍히고 결과가 없다면 “버튼 클릭 문제”는 끝났고 다음 문제는 핸들러 내부에 있습니다.

오늘 남길 결과는 끊긴 위치입니다

반응 없는 버튼을 만났을 때 가장 먼저 필요한 결과는 새 컴포넌트가 아닙니다. button clicked가 보이는지 한 줄로 기록하고, 안 보이면 클릭 전달을, 보이면 함수 이후를 확인하세요. 이 분기를 남기면 다음 수정은 한 파일이나 한 조건으로 좁아집니다.

참고 출처

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

Console에 button clicked가 안 뜰 때, React 클릭 신호 추적법