useEffect

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. class형 컴포넌트의 componentDidMount, componentDidUpdate를 합친 형태로 보아도 무방하다.

사용예시

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


const Info = () => {

    const [name, setName] = useState('')
    const [nickName, setNickName] = useState('')
    useEffect(() => {
        console.log('렌더링 완료!');
        console.log({
            name,
            nickName
        })
    }, [])
    const onChangeName = e => {
        setName(e.target.value);
    }
    const onChangeNickname = e => {
        setNickName(e.target.value);
    }

    return (
        <div>
            <div>
                <input value={name} onChange={onChangeName}></input>
                <input value={nickName} onChange={onChangeNickname}></input>
            </div>
            <div>
                <div>
                    <b>이름:</b> {name}
                </div>
                <div>
                    <b>닉네임:</b> {nickName}
                </div>
            </div>
        </div>
    )
}

export default Info

마운트될 때만 실행하기

useEffect에서 설정한 함수를 컴포넌트 화면에 맨 처음 렌더링 될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 두 번째 파라미터로 비어 있는 배열을 넣어주면 된다.

특정 값이 업데이트될 때만 실행하고 싶을 때

특정 값이 변경될 때만 호출하고 싶은 경우 클라스형 컴포넌트에서는

componentDidUpdate(prevProps, prevState){
	if(prevProps.value !== this.props.value) {
    	doSomething();
    }
}

props안에 들어있는 value 값이 바뀔 때만 특정 작업을 수행한다.
useEffect에서는 두 번째 파라미터로 전달되는 배열안에 검사하고 싶은 값을 넣어주면 된다.

뒷정리하기

useEffect는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 배열에 무엇을 넣을지에 따라 실행되는 조건이 다르다.

컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷 정리 함수를 반환해 주어야 한다.
useEffect를 다음과 같이 수정하고.

App.js에 간단하게 상태관리를 해보겠다.

보이기/숨기기 버튼을 통해 컴포넌트가 나타날 때 콘솔에 effect가 나타나고, 사라질때 cleanUp이 나타난다.