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

110

풀스택 서버리스

)

default:

return null

}

}

renderForm

함수는 현재 양식 타입인

formType

을 확인하고 적절한 양식을 렌더링합니다.

formType

이 변경되면

renderForm

이 호출되고

formType

에 따라 알맞은 양식을 다시 렌더링

합니다.

5.2.9

양식 타입 전환

Form

컴포넌트에서 마지막으로 할 일은 사용자가 서로 다른 양식을 수동으로 전환할 수 있도

록 버튼을 렌더링하는 것입니다. 세 가지 주요 양식은

signIn

,

signUp

및

forgotPassword

입

니다.

src

/

Form

.

js

에서

Form

함수의

return

부분을 수정하여 사용자가 양식 타입을 전환할 수 있

는 버튼을 추가하겠습니다.

return (

<div>

{renderForm()}

{

formType === 'signUp' && (

<p style={styles.toggleForm}>

Already have an account? <span

style={styles.anchor}

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

>Sign In</span>

</p>

)

}

{

formType === 'signIn' && (

<>

<p style={styles.toggleForm}>

Need an account? <span ...