[React] 리액트 <Link>와 HTML <a>의 차이점 (feat. CSS가 안 먹히는 이유)

 

React 에서 <Link>를 쓰는데, CSS에서는 왜 a로 스타일을 잡아야 하는가?

 

---

 

<Link>는 결국 <a> 태그로 변한다

 

 

<Link to={`/movie/${id}`}> 
	<img src={coverImage} alt={title} title={title} /> 
</Link>

 

브라우저가 실제로 이해하는 것은 <Link>가 아님 ❌

리액트는 빌드 및 렌더링 과정에서 <Link> 컴포넌트를 표준 HTML 태그인 <a>로 변환해서 브라우저에 전달한다

• 브라우저는 <Link>라는 태그를 모름
• 브라우저가 이해할 수 있는 것은 오직 HTML 표준 태그

👉 그래서 개발자 도구로 보면 <Link>는 항상 <a> 태그로 렌더링되어 있다

 

---

그런데 왜 그냥 <a>를 안 쓰고 <Link>를 쓸까?

<a> 태그의 동작 방식

<a href="/movie/1">이동</a>

• 클릭 시 페이지 전체를 새로 요청
• 브라우저가 새 HTML을 다시 받음
• 화면이 깜빡이고
• 리액트 상태(state)가 전부 초기화됨

<Link> 태그의 동작 방식

<Link to="/movie/1">이동</Link>

• 페이지 새로고침 없음
• 주소창만 변경
• 필요한 컴포넌트만 교체 렌더링
• 상태 유지 + 부드러운 화면 전환

즉, 페이지 이동 방식이 완전히 다르기 때문!

---

CSS에서 a로 스타일을 잡아야 하는 이유

 

/* ✅ 정상 동작 */ 
.movie_card a { display: block;} 

/* ❌ 동작 안 함 */ 
.movie_card Link { display: block; }

• CSS는 HTML 태그와 클래스만 인식
• Link는 리액트 컴포넌트 이름
• 브라우저 입장에서는 이미 <a>로 변환된 상태

 

---

 

한 줄 요약

1. 리액트의 <Link>는 브라우저에서 <a>로 렌더링된다
2. CSS에서는 반드시 a 태그로 선택해야 한다
3. 새로고침 없는 SPA 이동을 가능하게 해주는 리액트 전용 링크