url (3) 썸네일형 리스트형 ReactJS (10) useRouteMatch useRouteMatch는 특정 url에 들어와 있는지 확인해 주는 hook이다 예) useRouteMatch를 사용할 때에는 () 안에 확인하고 싶은 url을 넣어주면 된다 예시에서는 first 페이지에 있는지 확인을 위해 /first를 넣어주었다 이후 console을 확인해 보면 현재 Second 페이지에 있기 때문에 null이라고 나오는 걸 확인할 수 있다 그럼 First 페이지로 가보면 뭐가 나오는지 한번 보자 이렇게 url에 대한 간단한 정보가 나오는 걸 확인할 수 있다 여기서 끝내긴 아쉬우니까 useRouteMatch를 통해 간단한 작업을 한번 해보도록 하자 우선 페이지에 들어가 있을 때 그 페이지의 Link의 색깔을 바꿔주도록 해보자 예) 우선 첫 번째로 secondMatch를 만들어주고 B.. ReactJS (8) Link ReactJS에서는 anchor을 쓰지 않고 Link를 쓰는 걸 추천한다 그 이유는 anchor은 client-side-navigation이 없기 때문인데 이걸 간단하게 설명하면 페이지를 이동할 때 새로고침이 된다는 뜻이다 새로고침을 하게 되면 속도를 느리게 만들기 때문에 좋지 않고 Link는 새로고침이 되지 않아서 페이지 이동이 빠르기 때문에 routing을 할 때 Link를 쓰는 게 좋다 그럼 Link를 쓰는 방법에 대해 알아보자 예) 이런식으로 to props를 이용해서 url을 지정해 준다 여기서 조금 더 심화로 들어가면 Link로 페이지를 이동할 때 정보를 같이 넘겨줄 수 있다 예시 코드를 보기 전에 ReactJS (7) Map 편을 이어서 코드를 짜기 때문에 우선 7편을 간략하게라도 보고 오는.. ReactJS (6) useParams ReactJS (5)에서 route를 만들 때 info 변수를 만들었다 이렇게 url에서 어떠한 정보를 빼내올때 useParams를 쓰면 된다 예) 이렇게 useParams를 써준후 url은 /wef로 해주고 info 페이지로 이동후 console을 열어주면 이렇게 wef가 info 변수에 찍히는 걸 볼 수 있다 그럼 이 object안에 있는 info를 어떻게 가져올까? 이런 식으로 {변수이름}을 해주면 바로 정보를 빼내올 수 있다 필자는 typescript을 쓰기 때문에 따로 interface도 지정해 준 걸 볼 수 있다 이전 1 다음
