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

111

5

장

사용자 정의 인증 전략

onClick={() => updateFormType('signUp')}

>Sign Up</span>

</p>

<p style={{ ...styles.toggleForm, ...styles.resetPassword}}>

Forget your password? <span

style={styles.anchor}

onClick={() => updateFormType('forgotPassword')}

>Reset Password</span>

</p>

</>

)

}

</div>

)

이제

Form

컴포넌트는 현재 양식 타입에 따라 다른 버튼이 렌더링되고 사용자가 로그인, 가입,

비밀번호 재설정 양식을 수동으로 전환할 수 있게 되었습니다.

5.2.10

Profile

컴포넌트 수정

이제 새

Form

컴포넌트를 사용하려면

Prole

컴포넌트를 업데이트해야 합니다. 주요 변경 사

항은 현재 로그인한 사용자의 존재 여부에 따라

Form

컴포넌트 또는 사용자 프로필 정보를 렌

더링하는 것입니다.

Amplify

에는

Hub

라는 로컬 이벤트 시스템이 있습니다.

Amplify

는 사용자 로그인 같은 인증

이벤트 또는 파일 다운로드 알림같이 특정 이벤트가 발생할 때 서로 통신하기 위해

Hub

를 사용

합니다.

이 컴포넌트에서는

signOut

인증 이벤트를 ...