#11 함수형 컴포넌트 2. useEffect

지난 글에서 한 회원가입 기능에 간단하게 두 번째 훅인 useEffect를 이용해 기능을 추가해보자.

 

보통 우리가 뭔가를 입력하고 form을 submit 하면 잠시간은 submit 버튼이 disabled 상태가 된다.

 

이를 useEffect 훅을 통해 구현할 수 있다.

 

useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 해주는 훅이다.

 

클래스 컴포넌트의 componentDidMount, componentDidUpdate를 합친 기능이라고 생각하면 된다.

 

useEffect 또한 react 내장 훅이므로 첫 줄에 다음과 같이 useEffect를 import 해오자.

 

/*  practice/src/Form/Form.jsx  */

import React, { useState, useEffect } from 'react'

 

Form 함수 안에 다음과 같이 submit 값을 바꾸는 함수를 선언해보자.

 

/*  practice/src/Form/Form.jsx  */

const [submit, setSubmit] = useState(false)

<input type='submit' value='submit' disabled={submit}/>
// 다음과 같이 submit의 input element에는 disabled 추가

 

submit 버튼을 누르면 잠시 버튼이 비활성화되도록 submitHandler에 setSubmit 함수를 추가한다.

 

/*  practice/src/Form/Form.jsx  */

const submitHandler = (e) =>{
    e.preventDefault()
    setSubmit(true)

    const input = {
        userid: id.userInfo,
        userpw: pw.userInfo
    }

    setErrors(validate(input))
}

 

이제 useEffect를 사용해 컴포넌트의 변화에 대응해 submit 버튼을 다시 false로 바꿔주는 함수를 만들어보자,

 

/*  practice/src/Form/Form.jsx  */

useEffect (
    () => {
        if(submit) {
            console.log('request sent')
            if(Object.keys(errors).length === 0 ) {
                alert('가입 성공')
            }
        }
        setSubmit(false)
    }
)

 

이제 컴포넌트가 변화하면 useEffect의 함수가 발동해 setSubmit 함수로 submit 값을 false로 바꿔줄 것이다.

 

그런데 이러면 어떤 컴포넌트가 바뀌어도 useEffect가 발동된다는 문제가 있다.

 

우리가 input에 뭔가를 입력해 그 컴포넌트가 변해도 useEffect의 함수가 동일하게 발동한다.

 

함수에 2번째 인자로 특정 컴포넌트나 값을 넣어 그 값의 변화만을 감지해 발동하게끔 조건을 달 수 있다.

 

여기서는 errors의 변화만을 감지하게끔 할 것이다.

 

/*  practice/src/Form/Form.jsx  */

useEffect(
    () => {
        if(submit) {
            console.log('request sent')
            if(Object.keys(errors).length === 0 ) {
                alert('가입 성공')
            }
        }
        setSubmit(false)            
    },
    [errors]
)

 

이렇게 하고 submit 버튼을 클릭했을 때만 변화를 감지해 useEffect가 발동된다.