풀스택 서버리스: 리액트, AWS, 그래프QL을 이용한 최신 애플리케이션 개발

91

4

장

인증 소개

}

return (

<HashRouter>

<Nav current={current} />

<Switch>

<Route exact path="/" component={Public}/>

<Route exact path="/protected" component={Protected} />

<Route exact path="/profile" component={Profile}/>

<Route component={Public}/>

</Switch>

</HashRouter>

)

}

export default Router

이 컴포넌트의

useEffect

Hook

안에서

setRoute

를 호출하여 경로 이름을 설정합니다. 또한

경로가 변경될 때마다

setRoute

를 호출하는 이벤트 리스너

event

listener

를 설정합니다.

4.3.7

Profile

컴포넌트

애플리케이션을 완성하기 위해 필요한 마지막 컴포넌트는

Prole

컴포넌트입니다. 이 컴포넌

트에는 다음과 같은 몇 가지 기능이 있습니다.

●

사용자가 로그인하지 않은 경우 인증 양식을 렌더링합니다.

●

로그아웃 버튼을 제공합니다.

●

사용자의 정보를

UI

에 렌더링합니다.

1

장과 마찬가지로 인증 흐름을 렌더링하는

withAuthenticator

HOC

를 사용해서

Prole

컴

포넌트를