목록유저접근제한 (1)

미주알고주알

[React.js] 고차컴포넌트(HOC)로 유저 접근 제한하기 (useEffect를 다르게 사용함으로써)

로그인된 유저와 그렇지 않은 유저는 접근할 수 있는 페이지 및 api가 다르기 때문에 유저가 각 라우터 페이지에 접근하고 자 할 때 그 유저의 권한을 확인하는 것은 매우 중요하다! 근데 그 유저 정보를 확인하는 것은 또 다른 서버 api를 통해 토큰 및 세션을 비교해야 하기 때문에 비동기 작업으로써 `useEffect` 훅 안에서 라우터를 변경하는(`redirect`) 일이 가장 직관적이다. 하지만 `useEffect` 훅은 무조건 렌더링 후에 추가적으로 실행되기 때문에 컴포넌트가 화면에 보여지는 것은 불가피하다. 이건 .. 너무 위험하지 않을까?? 먼저 페이지를 보여주고 나서 라우터를 변경하는 것도 나쁘지 않겠지만 절대 노출해선 안되는 컴포넌트일 경우에는 미리 돔이 그려지지 않도록 제어하는 방식이 필요..
React.js 2023. 3. 23. 00:39
이전 Prev 1 Next 다음