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

108

풀스택 서버리스

5.2.7

updateForm

헬퍼 함수

다음으로 양식 상태를 업데이트하는

헬퍼 함수

helper

function

를 생성하겠습니다.

Form

.

js

에 만들

었던

initialFormState

변수는 다음과 같습니다.

const initialFormState = {

username: '', password: '', email: '', confirmationCode: ''

}

이 변수는 각 양식에서 사용할 값을 갖고 있습니다.

그다음

useState

Hook

을 사용해서

initialFormState

를 초깃값으로 하는 양식 상태

(

formState

)와 상태를 업데이트하는 함수 (

updateFormState

)를 만들었습니다.

const [formState, updateFormState] = useState(initialFormState)

현재 문제는 양식 상태를 업데이트하기 위해

initialFormState

와 동일한 형태의 새 객체를

updateFormState

에 전달해야 한다는 것입니다. 그러나 핸들러는 입력 중인 단일 타깃 이벤트

만 제공합니다. 어떻게 이 입력 이벤트를 상태에 대한 새 객체로 변환할 수 있을까요? 이를 위

해

Form

함수 안에서 사용할 헬퍼 함수를 만들겠습니다.

Form

.

js

에서

useState

아래 다음 코드를 추가하겠습니다. ...