[React-Hook] useEffect 란?

렌더링이 될 때 마다 감지하는 useEffect.

react class형 컴포넌트의 [componentDidMount, componentDidUpdate]와 유사합니다.

 

Info.js

import {useState, useEffect } 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 name="name" onChange={onChangeName} />
                <input name="nickname" onChange={onChangeNickname} />
            </div>
            <div>
                <div><b>이름 :</b>{name}</div>
            </div>
            <div>
                <div><b>닉네임 :</b>{nickname}</div>
            </div>
        </div>	
    )
}

export default Info;

해당 코드를 입력하고 렌더링 후 콘솔창을 보면 input에 값을 입력할 때 마다 로그가 발생됩니다.

이 로그는 useEffect 에서 설정한 것으로, input 창에 업데이트가 이루어질때만 발생한다는것을 알 수 있습니다.

 

만약 로그가 두번이 나온다면 이는 코드의 문제가 아니라

index.js 에서 App.js를 렌더링 하기 전 React.StrictMode를 통해 발생되는 현상으로 알고 계시면 됩니다.

해당 모드는 개발 환경에서만 발생하는 것으로 코드의 문제를 발견하기 위해 신경쓰지 않아도 됩니다.

 

useEffect 를 사용할 때 특정 값이 업데이트 될때만 실행하고 싶다면,

useEffect(파라미터1, 파라미터2)

파라미터 2번째에 확인하고싶은 값을 입력하면 됩니다.

2번째 파라미터에는 useState를 통해 관리하고 있는 상태를 넣어도 되고, props로 전달받은 값을 넣어도 됩니다.

useEffect(()=>{
 (...)
},[name])

위에서 작성했던 코드를 인용해서 다시 작성해보면 2번째 파라미터로 name을 넣을 경우

위의 사진처럼 console 창에는 name 변화시에만 로그가 발동되는걸 확인 할 수 있습니다.