[React - 18] Link

리액트 라우터의 Link는 사용자가 클릭할 때  리액트 애플리케이션의 다른 경로로 라우팅하기 위해 사용되는 컴포넌트입니다. html의 <a> 태그로 렌더링이 되고 기존의 <a> 태그와는 달리 페이지 전체를 새로고침하지 않고도 내부적으로 리액트 라우터의 라우팅 메커니즘을 이용하여 컴포넌트 간의 전환을 가능하게 합니다.

---

Link 컴포넌트의 이점

1. 성능 향상

 전체 페이지 새로고침 없이 컴포넌트 간의 전환을 처리하기 때문에 빠른 사용자 경험을 제공합니다.

2. 브라우저 히스토리 관리

뒤로가기, 앞으로가기 버튼 등 브라우저 히스토리를 자동으로 관리하여 더 나은 사용자 탐색을 지원합니다.

3. 애플리케이션 상태 유지 

리액트 라우터는 페이지 전환 시 애플리케이션의 상태를 유지하고 관리할 수 있습니다.

4. 동적 경로 지원

to 속성에 동적 경로나 파라미터를 포함시켜 동적으로 경로를 생성할 수 있습니다.

---

to

이동할 경로를 나타내는 필수 속성입니다. 문자열 형태로 경로를 지정합니다.

이동하고자 하는 경로를 정의하면 됩니다. 리터럴 문법으로 동적 경로를 지원하며,

객체를 사용하여 경로와 함께 상태(state) 등의 정보를 전달할 수도 있습니다.

 

React Router v5

<Link to={{ 
	pathname: "/product",
	search: "?id=123",
	state: { category: "electronics" }
}}>제품 페이지로 이동</Link>

React Router v5, v6

<Link to="/product" state={{ category: "electronics" }}>제품 페이지로 이동</Link>

---

replace

이 속성을 true로 설정하면 Link 클릭 시 브라우저의 히스토리에 새로운 항목을 추가하는 대신 현재 항목을 바꿉니다. 

보통 이전 페이지로 돌아갈 때 사용됩니다.

<Link to="/about" replace>Replace 사용 예</Link>

---

ref

리액트 라우터 v6부터는 innerRef 대신 ref를 사용하도록 변경되었습니다. 

이전 버전에서는 <Link> 컴포넌트가 렌더링한 <a> 태그에 대한 참조를 제공합니다. 

이를 사용하여 DOM 요소를 조작할 수 있습니다.

<Link to="/about" innerRef={myRef}>About 페이지로 이동</Link>

---

component

리액트 라우터 v6부터는 innerRef 대신 ref를 사용하도록 변경되었습니다. 

이전 버전에서는 <Link> 컴포넌트가 렌더링한 <a> 태그에 대한 참조를 제공합니다. 

이를 사용하여 DOM 요소를 조작할 수 있습니다.

<Link to="/about" component={CustomLinkComponent}>About 페이지로 이동</Link>

---

onClick

리액트 라우터 v6부터는 innerRef 대신 ref를 사용하도록 변경되었습니다. 

이전 버전에서는 <Link> 컴포넌트가 렌더링한 <a> 태그에 대한 참조를 제공합니다. 

이를 사용하여 DOM 요소를 조작할 수 있습니다.

<Link to="/about" onClick={handleLinkClick}>About 페이지로 이동</Link>

---

위에서 설명한 프로퍼티들은 Link 컴포넌트의 일부이며, 

이외에도 자세한 옵션과 사용법은 리액트 라우터의 공식 문서를 참고하시면 좋습니다.

https://reactrouter.com/en/main/components/link#link

Link v6.15.0