[React] react-router-dom을 사용해 접근 제한 페이지 구현하기 (with. TypeScript)

박하민·2023년 7월 21일

React

React.js

목록 보기

3/3

안녕하세요! 로그인 된 회원들만 콘텐츠를 이용할 수 있도록 접근 제한 페이지를 구현하기 위해 구글을 찾아봤는데, 원하는 정보가 없어서 답답한 마음에 직접 작성해 보도록 하겠습니다.
(답답하면 니들이 작성하던가!)

준비물

react-router-dom 라이브러리

npm install react-router-dom @types/react-router-dom

작성자의 파일 구조

우선 App.tsx에 MainRoute라는 경로 분기가 될 Route를 모아놓은 컴포넌트를 만들어 주었고
MainRoute에서 Home, auth에 해당되는 경로의 분기를 나눠줬습니다.
(element에 PrivateRoute는 접근 제한에 사용될 컴포넌트입니다!)

HomeRoute는 HomePage라는 UI를 가지고 있는 페이지를 보여주는 컴포넌트의 경로 정보를 가지고 있습니다.
이제 로그인 된 유저만 HomePage에 접근할 수 있도록 PrivateRoute를 만들어보도록 하겠습니다!

포인트 분석

isLogIn

⭐️children⭐️

isLogIn

진행 중인 프로젝트는 서버와 연동 계획이 없는 관계로 로그인 시 localStorage에 userId를 저장하는 형식으로 작동하고 있습니다. 때문에 localStorage에서 로그인 증표인 userId를 꺼내서(getItem) 로그인 여부를 판단하고 있습니다.
Q. window.localStorage.getItem이 아니라 왜 getItem인가요??
A.
1. localStorage.tsx라는 컴포넌트를 따로 만들어서 사용했습니다.
2. window.localStorage에서 window는 보통 많이 생략해서 사용하길래 생략해 봤습니다 👀

localStorage 외에도 다른 상태 관리 방법을 사용하셔도 됩니다.
(ex. Redux, Context 등등) 해당 store에서 저장한 로그인 판단 변수를 사용하면 되겠네요!

children

children은 예약어로 제가 따로 지정한 변수명이 아닙니다.
(children을 이해하기 위해서는 JSX에 대한 기본 개념이 필요한데, 이 부분은 따로 포스팅을 작성하도록 하겠습니다!)
부모 컴포넌트에서 자식 컴포넌트의 정보에 접근할 때 사용됩니다.

<부모 컴포넌트>
	<자식 컴포넌트 /> // 컴포넌트도 접근이 가능하다 (object 형태로 존재하고 있다.)
    용돈 주세요! // 이 값도 children을 사용하면 부모 컴포넌트에서 접근 가능
<부모 컴포넌트>

<HomeRoute/> // object로 구성된 형태이다. ( 아래 사진과 같은 데이터를 포함하고 있다. )

그렇다면 부모 컴포넌트 PrivateRoute에서 children을 콘솔에 출력해 보면 object 형태의 값들이 출력 되는데,

// PrivateRoute.tsx

console.log(children);

children의 출력 값

이번에는 MainRoute에서 HomeRoute를 콘솔에 출력해 보면? 똑같은 object 값이 출력됩니다

// MainRoute.tsx

console.log(<HomeRoute>);

children == 자식 컴포넌트의 정보!

컴포넌트 형태일 경우 object 형식으로 그 정보가 children을 통해 전달된다!

⭐️react는 컴포넌트를 실행하면서 return 안에 있는 정보들을 해석하고 화면에 그려준다.⭐️

즉, HomeRoute는 object 형태로 존재하고! 컴포넌트가 실행되면 해석되어 실행된다.
PrivateRoute에서 children은 HomeRoute의 정보이다!

결론

삼항연산자를 사용해 유저가 로그인 된 상태라면 생성된 정보 children(HomeRoute의 정보를 담고 있는 object 형태)을 실행해 주고, 로그인 정보가 null이면 /auth/login으로 이동시키면 됩니다.

Q. Fragment를 사용한 이유?
A.

children은 정보만 가지고 있는 object 형태로 자바스크립트 코드 children은 JS 코드이므로 중괄호로 감싸주고 태그에 포함시켜야 화면에 그려집니다.
Fragment or 빈 태그 <>를 사용해도 되지만 그 외 다른 태그를(ex. div) 사용하면 비어있는 div가 한 겹 더 생깁니다.
<> 태그 보다는 명시적인 의미를 위해서 사용했습니다.

Fragment or 빈 태그(<>)를 사용할 경우

div 태그를 사용할 경우 (의미 없는 태그 발생)

정리

children을 사용하면 부모 컴포넌트에서 자식 컴포넌트에 접근이 가능하다.
PrivateRoute라는 로그인 여부를 체크하는 컴포넌트를 만든다.
로그인 된 유저만 접근이 가능하도록 하고 싶은 컴포넌트를 PrivateRoute에 자식 컴포넌트로 위치시킨다.
유저가 Hompage의 경로 '/'에 접속하게 되면 PrivateRoute가 실행되고, localStorage에서 userId 키 값을 저장한 isLogin 변수로 로그인 여부를 확인합니다.
로그인 된 유저라면
HomeRoute( == children)를 실행하고 아니면 로그인 화면으로 Navigate 해라!