React의 Href onClick 이벤트

React 링크의 클릭을 처리하려면 onClick prop에 함수를 전달합니다. 이동이 필요한 HTML <a>에는 의미 있는 href를 지정하세요. 핸들러가 event.preventDefault()를 호출하지 않으면 핸들러가 실행된 뒤에도 기본 링크 이동이 계속됩니다.

React에서 링크(<a></a>)에 onClick 동작 설정하기

핸들러를 정의한 다음 앵커의 onClick={handleClick}에 함수 참조를 전달합니다. 다음 독립 실행형 JavaScript 예제는 메시지를 출력하는 핸들러를 보여 줍니다. React 컴포넌트에서는 같은 함수를 앵커의 onClick 값으로 사용하면 됩니다.

function handleClick() {
  console.log("You clicked the link!");
}

handleClick();

핸들러가 실행되면 예제의 메시지가 브라우저 콘솔에 표시됩니다. 컴포넌트에서는 앵커를 <a href="/account" onClick={handleClick}>Open account</a>처럼 작성합니다. 여기서 href는 이동할 주소이고, React는 클릭할 때 핸들러를 호출합니다. onClick={handleClick()}라고 작성하면 클릭할 때 함수 참조를 전달하는 대신 렌더링 중에 함수를 호출하게 되므로 피하세요.

기본적으로 브라우저는 핸들러 실행 후 앵커의 href를 따라 이동합니다. 이동하지 않고 작업만 수행하려면 이벤트를 인수로 받아 핸들러 안에서 event.preventDefault()를 호출하세요. 이렇게 하면 해당 앵커의 이동은 취소되지만, 브라우저의 모든 기본 동작이 취소되는 것은 아닙니다. 이동이 아닌 작업에는 보통 버튼이 더 적절합니다.

React Router의 Link 컴포넌트에 onClick 동작 설정하기

React Router를 사용하는 앱에서는 Link 컴포넌트가 클라이언트 측 이동을 처리합니다. 목적지는 to로 지정하고, onClick에는 같은 방식으로 핸들러를 연결합니다. 예를 들면 <Link to="/account" onClick={handleClick}>Open account</Link>와 같습니다. 이 코드는 라우터 패키지에 의존하는 JSX 예시이며, 단독으로 실행할 수 있는 예제는 아닙니다.

핸들러가 이동 전에 로그를 남기거나 추적하는 등의 작업만 한다면 preventDefault()를 호출하지 말고 실행을 마치게 두세요. 그러면 라우터가 to 경로로 이동할 수 있습니다. 클릭 후 현재 경로에 머물러야 할 때만 event.preventDefault()를 호출하세요. HTML 앵커의 목적지는 href로 지정하지만, React Router의 Link는 경로를 to로 지정합니다.

React에서 화살표 함수를 인라인으로 사용해 onClick 동작 설정하기

한 곳에서만 사용하는 짧은 작업이라면 prop에 화살표 함수를 바로 작성할 수 있습니다. 예를 들면 <a href="/account" onClick={() => console.log("Opening account")}>Open account</a>와 같습니다. 이 작업이 끝난 뒤에도 앵커는 href로 이동합니다. 이동을 막으려면 화살표 함수의 인수로 이벤트를 받아 명시적으로 event.preventDefault()를 호출하세요.

인라인 핸들러는 짧고 해당 위치에서만 쓰는 작업에 간결합니다. 로직이 길거나 재사용해야 하거나 JSX 바깥에서 분리해 두는 편이 이해하기 쉬우면 이름을 붙인 핸들러를 사용하세요.

결론

React 링크 클릭에 응답하려면 onClick에 함수를 전달하세요. 브라우저 이동에는 앵커의 href를 사용하고, 클라이언트 측 경로 이동에는 React Router의 Link와 to를 사용합니다. 상호작용의 일부로 이동해야 한다면 그대로 진행하게 두고, 클릭으로 해당 링크의 기본 이동을 취소해야 할 때만 preventDefault()를 호출하세요.