리액트에서 링크를 href 로 쓰면
이 이슈는 리액트로 만든 실습용 쇼핑몰 사이트를 Github에 배포해보는 연습을 할 때 발생했다.
기존에 이 깃 블로그를 사용하고 있었기 때문에 쇼핑몰 배포는 서브 리포지토리에서 해야 했고, 그럴 경우 경로는 내아이디.github.io/리포지토리주소/ 가 된다.
배포 후 메인에는 정상적으로 접속 할 수 있게 되었는데, 문제는 Nav에서 메뉴를 눌렀을 때 404 페이지가 뜬다는 거였다. 빌드에 시간이 걸려서 그런다는 말도 있고, package.json에 추가 설정을 해 주어야 한다는 말도 있었지만 내 경우에는 그게 문제가 아니었다.
이틀을 씨름하다 간신히 원인을 알아냈는데, 맥빠지게도 링크를 href로 걸어둬서 였다.
위 이미지 처럼 말이다. 리액트에서 링크를 걸 때 to를 사용한다는 건 알고 있었는데, 페이지를 만들 때 사용한 React-Bootstrap 예제에서 href로 링크가 걸려 있었고 로컬에서는 정상적으로 작동하길래 아무거나 써도 상관이 없는 줄 알았다. 역시 하라는 건 하라는 대로 해야 문제가 안 생긴다. 어쨌든 ‘왜 이걸 하면 안 되는 지’도 알아야 다음부턴 주의해서 안 쓰려고 할 테니까 찾아보기로 했다.
a href는 페이지를 이동시키고 모든 걸 새로고침 한다
일반적으로 페이지를 이동시킬 때 사용하는 a href 는 페이지를 이동시키면서 아예 새로 불러온다. 그렇게 되면 리액트 앱이 가지고 있던 상태들도 초기화 되고, 기존에 랜더링 되어 있던 컴포넌트들도 모두 사라진 후 새로 랜더링을 하게 된다. 깃허브에서 제공하는 리포지토리 빌드 방식에서는 내아이디.github.io/리포지토리주소/경로/1 따위의 주소에서 새로고침을 하면 해당 페이지로 이동되는 게 아니라 404가 뜬다. 페이지 이동을 하고 싶으면(한 것 처럼 보이고 싶으면) 메인에서 링크를 타고 들어가야 이동 할 수 있는 것이다.
그런데 href로 링크를 걸어놨으니, 그걸 누르면 해당 주소에서 새로고침을 한 것이나 다름 없었고 당연히 404가 뜨게 된다.
link to는 주소만 바꿀 뿐 페이지를 새로고침 하지 않는다
리액트는 페이지를 이동하는 게 아니라, 한 페이지 내에서 컴포넌트를 교체하여 새로운 내용을 보여준다. 그래서 리액터 라우터에 포함되어 있는 Link 컴포넌트를 이용하여 브라우저의 주소만 변경하고 페이지를 새로고침 하지는 않는 방식으로 작동시키는 것이다.
그럼 깃허브 빌드가 아닐 때는 href를 써도 상관은 없는지?
아니다. 리액트에서 href 대신 to를 권장하는 또 다른 이유는, a href는 페이지를 매번 새로 불러와야 하므로 상태 유지도 어려울 뿐더러 속도까지 저하 된다. 빠른 속도로 필요한 페이지를 그려주는 리액트를 쓰는 이유가 사라지는 것이다. 그러니 꼭 href 대신 Link to를 사용하는 버릇을 들이자.