ReactJS (8) Link

ReactJS에서는 anchor을 쓰지 않고 Link를 쓰는 걸 추천한다

 

그 이유는 anchor은 client-side-navigation이 없기 때문인데

이걸 간단하게 설명하면 페이지를 이동할 때 새로고침이 된다는 뜻이다

새로고침을 하게 되면 속도를 느리게 만들기 때문에 좋지 않고

Link는 새로고침이 되지 않아서 페이지 이동이 빠르기 때문에 routing을 할 때 Link를 쓰는 게 좋다

 

그럼 Link를 쓰는 방법에 대해 알아보자

 

예)

이런식으로 to props를 이용해서 url을 지정해 준다

 

여기서 조금 더 심화로 들어가면 Link로 페이지를 이동할 때 정보를 같이 넘겨줄 수 있다

예시 코드를 보기 전에 ReactJS (7) Map 편을 이어서 코드를 짜기 때문에 우선 7편을 간략하게라도 보고 오는 걸 추천한다

 

예)

7편을 보고 왔다면 우선 coins (array objects)를 map으로 푼 후 각 코인 페이지로 이동할 수 있게끔 Link를 걸어주었다

 

예) Link를 걸어준 후 실행하면 각 코인 페이지로 이동할 수 있다

하지만 다른 페이지로 이동할 때  Home component에서 이미 갖고 있는 정보들을 같이 넘겨주려면 state를 사용해야 된다

하지만 왜 굳이 다른 정보를 넘겨줘야 할까 라는 의문이 들 수 있다

그 이유는 바로 api를 사용하여 정보들을 fetch 하는 시간이 걸리는데

다른 페이지로 넘어갈 때 내가 이미 fetch 한 정보들을 다른 페이지로 넘어간다고 해서 또 fetch 할 이유가 없고 fetch 하는 시간이 또 걸리기 때문에 좋지 않다

그래서 state를 통해 이미 갖고 있는 정보들을 넘겨준다

예시에서는 각 코인 페이지로 이동할 때 코인의 이름 정보를 같이 넘겨준다

 

자 이렇게 해서 정보를 보냈다면 어떻게 이 정보들을 갖고 와 쓸 수 있을까?

나는 미리 routing 설정을 해줬다

 

예)

이렇게 coin.name 이 bitcoin이면 /bit coin 페이지로 가게끔 해놨다 <Info/> component로 넘어간다

그럼 state로 넘겨준 정보를 Info component가 받는다는 것인데 info component에서 정보를 받게끔 만들어보자

받는 방법은 매우 쉬운데 바로 useLocation을 쓰는 것이다

 

예)

이렇게 예시와 같이 useLocation을 사용하여 state를 갖고 왔다

필자는 typescript를 쓰기 때문에 따로 interface를 만들어주었다

이렇게 코드를 짠 후 실행시켜 보면

 

이렇게 정보를 (코인 이름)을 갖고 와 잘 실행이 되는 걸 확인할 수 있다