onclick vs <a> 태그 – 링크 이동, 어떤 방식이 더 좋을까?

최근 진행한 팀 프로젝트에서 페이지 이동을 처리하는 방식에 대해 논의가 있었습니다.

// 방법 1: a 태그 사용
<a href="#">...</a>

// 방법 2: div에 onclick 사용
<div onclick={...}>...</div>

위의 두가지 방식 모두 페이지를 이동시킬 수 있지만 어떤 방식이 올바른 방식인지에 대해서 고민하는 과정에서 이 두가지 방식의 차이점과 어떤 방식이 더 추천되는 방식인지 두 가지 방식의 차이점과 권장 방식을 정리해보겠습니다.

💁🏻‍♀️ 우선 결론부터 말하자면
페이지 이동을 목적으로 한다면 onclick보다는 a 태그를 사용하는 것이 명확히 더 추천되는 방법입니다.

✅ 겉보기엔 비슷하지만 실제론 큰 차이가 있다

두 방식은 UI 상에서는 비슷하게 동작할 수 있지만 a 태그는 단순히 작동만 하는 것이 아니라 웹의 의미론적 구조, 접근성, SEO, 브라우저 기본 기능 등 다양한 요소에서 정석적인 방식인 반면, onclick은 페이지 이동이 아니라 모달 열기, 메뉴 토글, 상태 변경 같은 UI 상호작용 처리에 더 적합한 방식입니다.즉, 목적에 따라 사용해야하는 두가지 방식입니다.

---

🧭 a 태그와 onclick 각각의 역할과 차이점

<a> 태그 ?

<a> 태그는 HTML에서 “하이퍼링크”, 즉 다른 페이지나 리소스로 이동하는 링크를 의미하는 태그입니다

✅ 장점
1. 웹 접근성: 스크린 리더가 링크로 읽어줌
2. SEO 최적화: 검색 엔진이 구조를 파악하고 페이지를 크롤링 한다.
3.  브라우저 기능 호환: Ctrl+클릭, 우클릭 → 새 탭 열기 등 기본 기능 사용 가능
4. 의미론적 태그: HTML 구조가 명확해짐

❌ 단점
1. 타일 제어가 어려울 수 있어 버튼처럼 보이게 만들려면 CSS 작업 필요
2. 내부적으로 페이지 이동을 트리거하기 때문에 JavaScript 제어가 필요할 수 있음

---

onclick 방식  ?

onClick은 JavaScript 이벤트 핸들러로, 사용자의 클릭 이벤트에 따라 특정 동작을 수행할 수 있게 해줍니다.
주로 버튼 클릭, 메뉴 열기, 모달 띄우기 기능 구현에 사용됩니다.

✅ 장점
1. 다양한 UI 동작 처리 가능: 페이지 이동 외에도 상태 변경, 팝업, 애니메이션 등 자유로운 제어 가능
2. 유연성 : 다양한 이벤트 로직 제어 가능
3. 디자인 자유도 : 어떤 html 태그에도 이벤트 부여가 가능하다.

❌ 단점 ( = div + onclick 사용 시 문제점 )
1. 접근성 저하 : 클릭 가능한 요소인지 정확히 알 수 없다.
2. 브라우저 기본 기능 미지원 : 새 탭 열기, 링크 복사 기능 적용 불가능하다.
3. div 같은 태그에 네비게이션을 부여하는 방식은 비정상적인 사용으로 볼 수 있음 
4. 검색 엔진이 따라가지 못한다. 

---

📌 결론

링크 이동의 목적이라면, a 태그를 사용하는 것이 무조건적으로 권장되는 표준 방법입니다. 
onClick으로도 페이지 전환이 가능하더라도, 접근성, SEO, 사용자 경험, 브라우저 호환성 모든 면에서 부족하기 때문이다.

하지만 onclick을 절대로 사용하면 안된다는 의미는 아니고, onclick은 페이지 이동이 아닌 다른 사용자 상호작용 처리 시 매우 유용하게 사용되기 때문에 UI동작 상황에서는 onclick이 더 추천되는 적절한 방식이라고 볼 수 있습니다.



이미지로 정리해보면 아래와 같습니다.