[005] 리액트 (React) 배우기 - 함수형 컴포넌트 useState Hook(훅) (상태 업데이트)

안녕하세요~ totally 개발자입니다.

 

State

 

함수형 컴포넌트 State(상태)에 관해 살펴보도록 하겠습니다. 리액트는 컴포넌트를 조합하여 페이지를 만들어가는 방식이고 각각의 컴포넌트의 상태를 관리해서 업데이트하는 방식입니다. 바로 useState를 사용하면 되는데, 기존에 만든 form을 사용해서 form이 제출되었을 때 아래에 입력한 사용자의 정보를 출력해줄 수 있도록 상태를 업데이트하여 UI를 재랜더링해줄 수 있도록 합니다. 기존 클래스형 컴포넌트에서는 setState를 사용해서 업데이트하는 반면 함수형 컴포넌트의 useState를 사용하는 경우에는 setState용의 함수를 지정하기 때문에 그 함수를 사용해서 업데이트해야 합니다.

 

Step 1: 먼저 import React, { useState } from 'react';를 통해 useState를 import 해줍니다.

useState는 const [변수, 변수의 상태를 변경하는 함수] = useState(기본 변수값) 이렇게 구성이 됩니다. const [userInfo, setUserInfo]는 바로 Deconstructing assignment라고 하며 useState 자체가 2개의 변수를 가지기 때문에 각각 userInfo와 setUserInfo에 할당해주게 됩니다. 즉 const [a, b] = [10, 20];과 동일한 원리입니다. 리액트에서는 그냥 변수에 재할당한다고 해서 상태가 업데이트되어 UI가 재랜더링되지 않기 때문에 이 useState를 이용해서 변수를 업데이트해주어야 합니다.

 

 

Step 2: submitForm 업데이트해줍니다.

먼저 submitForm 부분을 보겠습니다. 여기에서 아까 지정했던 submittedUserResult의 변수를 setSubmittedUserResult 함수를 사용해서 업데이트해줍니다. 11~15번째 라인에 div 태그로 결과를 보여줄 수 있도록 하겠습니다.

 

 

Step 3: showInputValue 부분에 userInfo를 업데이트해줄 수 있도록 setUserInfo를 작성해줍니다.

21번째 줄에 ...userInfo은 userInfo의 모든 누적된 값을 적용시켜주기 위함이며 [e.target.name] 이 부분에는 e.target.name에 각각 lastName, firstName, job이 들어가게 되고 e.target.value에 각각 입력한 값들이 들어가게 됩니다. 

 

 

 

Step 4: 36번째 줄에 {submittedUserResult}을 적어주면 완성입니다. 처음에 submittedUserResult에는 값이 없지만 추후 폼 제출하면 submitedUserResult에는 <div> 즉 결과값들을 출력할 수 있도록 변수가 업데이트되어 UI에 반영되게 됩니다.

 

Step 5: 결과는 아래와 같습니다. 위와 같이 useState를 사용하지 않으면 submit 버튼을 눌러도 아래에 <div> 태그가 출력되지 않기 때문에 상태 업데이트를 통해서 코드를 작성해주셔야 합니다.

 

 

[전체 소스 코드]