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

88

풀스택 서버리스

<Link to="/">

<HomeOutlined />Home

</Link>

</Menu.Item>

<Menu.Item key="profile">

<Link to="/profile">

<ProfileOutlined />Profile

</Link>

</Menu.Item>

<Menu.Item key="protected">

<Link to="/protected">

<FileProtectOutlined />Protected

</Link>

</Menu.Item>

</Menu>

</div>

)

}

export default Nav

4.3.5

Protected

컴포넌트

Protected

컴포넌트는 보호된 경로로, 이 경로에 접근하려는 사용자가 로그인이 되어 있는 경

우에만 화면을 볼 수 있습니다. 사용자가 로그인하지 않은 경우에는 가입하거나 로그인하기 위

해 프로필 페이지로 리다이렉션됩니다.

이 컴포넌트에는 리액트의

useEffect

Hook

과

AWS

Amplify

의

Auth

클래스가 사용됩니다.

useEffect

함수 컴포넌트

function

component

에서 부가적인 작업을 수행할 수 있는 리액트

Hook

입니

다.

Hook

의 첫 번째 인수에 정의된 함수는 컴포넌트가 렌더링될 때 호출되고, 선택적

으로 리렌더링될 때마다 호출됩니다. 빈 배열을