React에서 버튼 클릭 이벤트 처리하기

React에서 버튼 클릭 이벤트 처리하기에서 먼저 볼 부분

React 이벤트는 JSX 속성에 함수로 전달합니다. 함수를 즉시 호출하는지, 클릭 때 실행할 함수로 넘기는지 구분해야 합니다.

onClick={handleClick}은 클릭했을 때 함수를 실행하라는 뜻입니다. onClick={handleClick()}처럼 괄호를 붙이면 렌더링 중 바로 실행될 수 있습니다.

인자를 넘겨야 한다면 화살표 함수로 감싸는 방식이 안전합니다. onClick={() => handleClick(id)}처럼 작성하면 클릭 때 실행됩니다.

상태를 바꾸는 이벤트에서는 이전 상태와 새 상태의 관계를 분명히 해야 합니다. 단순 토글은 !값으로도 가능하지만 복잡하면 함수형 업데이트를 고려합니다.

좋아요 버튼

function LikeButton() {
  const [liked, setLiked] = React.useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? "좋아요 취소" : "좋아요"}
    </button>
  );
}

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

React 글은 화면 조각, 데이터 흐름, 상태 변경 시점을 나누어 읽으면 헷갈림이 줄어듭니다.

값이 부모에서 내려오는지, 컴포넌트 내부에서 바뀌는지 구분하면 props와 state 관련 오류를 훨씬 빨리 찾을 수 있습니다.

작은 예제라도 렌더링 전후에 화면이 왜 바뀌는지 설명할 수 있어야 다음 단계의 Hook을 이해하기 쉽습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• onClick에 함수 실행 결과가 아니라 함수를 넘겼는지 확인하기
• 인자가 필요하면 화살표 함수로 감싸기
• 상태 변경은 setter 함수 사용하기
• 버튼 문구가 상태에 맞게 바뀌는지 확인하기