JWT 공부 2

Context API

 

 

 

위와 같이 전역적으로 state 관리가 가능해진다.

 

React Router dom v6 와일드 카드

https://devalice.tistory.com/112

[React-Router] v6로 적용하기

https://devalice.tistory.com/112

 

명시적으로 해당 url에만 접근가능하도록 위해 exact는 필수였다. 하지만 v6에서는 아예 기본 전제가 바뀌어서 exact가 기본으로 되어있어 exact 속성이 사라지게 되었다.

그렇다면 exact 없이 있는 url 형식으로 구성하기 위해서는 * 를 사용하도록 권고한다.

//v6
<Routes>
  <Route path="member/*" element={<Member />} />
</Routes>

 

 

 

Hooks 의 사용

훅을 사용하면 반복되는 코드를 줄일 수 있고 시간도 절약할 수 있다.

 

 

useLocation

 

useLocation과 useParams 에 대한 좋은 자료

https://velog.io/@yiyb0603/React-Router-dom%EC%9D%98-%EC%9C%A0%EC%9A%A9%ED%95%9C-hooks%EB%93%A4

React Router dom의 유용한 hooks들 📃

 

Navigate State

다음과 같이 state를 login 페이지로 넘겨줄 경우에는

 

state가 어떠한 식으로 전달될 지 궁금하여 콘솔을 찍어봤다. 

먼저 설명하자면 위의 state 값은 useLocation을 사용하여 받을 수 있다.

 

 

보이는가? 이런식으로 state에 from이라는 key 값으로 변수가 전달 되었다.

 

Navigate replace

 

예제 코드를 보면, replace를 사용하였다.

react router dom v6 가 되면서 history.push , history.replace가 위와 같이 Navigate , Navigate 안에 replace를 넣는 방식으로 변화하였다.

 

push는 스택에 가장 위에 쌓는 것이고, replace는 스택의 최상위를 to에 해당하는 페이지로 변경하는 것이다.

 

 

LinkPage에서 Editors Page로 이동하려면 권한이 없기 떄문에 login 페이지로 이동하게 된다.

이때 replace를 사용하지 않게되면 

LinkPage -> RequiredAuth  -> login 페이지가 되어 뒤로 가기 하였을때 다시 LinkPage로 이동할 수 없었다.

그러므로 replace를 사용해주어야한다.

 

LinkPage -> RequiredAuth  login 으로 말이다.

그러면 뒤로 가기 하였을때 다시 LinkPage로 이동이 가능하다.

 

v5 에서  history.push , history.replace 관련 자료

https://velog.io/@gwak2837/React-Router-History-push%EC%99%80-replace%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

React Router History : push와 replace의 차이점

 

알게된 코딩 방법

loaction.state?.from?.pathname 이 만약에 null이라면 "/" 값을 넣어주게된다.

null 값이 아니라면  loaction.state?.from?.pathname 에 해당하는 값을 변수에 할당한다.

 

useNavigate

 

useNavigate 훅을 사용하면 해당 page로 이동할 수 있게된다. 

replace 처리는 위와 같이 해주면 된다.

 

 

Javascript find method

 

https://bbaktaeho-95.tistory.com/40

[Javascript/Array] find, findIndex, indexOf (배열 검색)

 

 

Javascript Include

 

https://www.codingfactory.net/10899

JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드