[React] Hooks 사용하기 - useEffect (업데이트, 마운트 시 함수 실행)

혹시 Hooks을 처음 사용한다면? 앞의 강좌를 먼저확인해주세요

https://ordinary-code.tistory.com/120

[React] 함수형 컴포넌트 상태관리 Hooks useState 사용법 알아보기

 

useEffect 사용 방법

useEffect란?

Hooks 기능 중 useEffect는 컴포넌트가 랜더링 될 때 특정 작업을 수행하게 한다.

useEffect는 class 생명주기에서 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 개념이라고 생각하면 된다.

즉, useEffect를 이용하면, 컴포넌트가 마운트 될 때 상태 값이 업데이트될 때 코드를 실행할 수 있다는 것이다.

 

가장 기본적으로 일단 useEffect hooks을 사용해보자

 

useEffect.js

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

const Info = () => {
    const [name, setName] = useState('');
    useEffect(()=> {
        console.log("useEffect");
        console.log(name);
    });

    const onChangeName = (e)=> {
        setName(e.target.value)
    };

    return(
        <div>
            <p>이름 : {name} </p>
            <input value={name} onChange={onChangeName} />
        </div>
    );
};

export default Info

import를 통해서 useEffect를 주입해주었고 name이라는 상태를 useState를 이용해서 생성했다.

useEffect가 실행될 때 console.log로 useEffect랑 name상태 값을 확인하는 코드를 작성하고 실행해보자.

 

useEffect console.log실행화면

 

 

useEffect 최적화

Mount때만 실행하기

만약 계속해서 추적할 필요 없이 맨 처음 이화면을 mount 해서 랜더링 할 때만 실행되고 update때 실행을 하고 싶지 않은 경우가 있을 수 있다.

기본적으로 useEffect는 마운트와 상태 값 Update 시점마다 반복적으로 실행되기 때문에

첫 페이지 랜더링 때만 실행하고 싶을 경우 두 번째 인수로 빈 배열을 넘겨준다.

 

useEffect.js

...

useEffect(()=> {
	console.log("Mount");
}, []);

...

기존 코드와 동일한 구조에서 useEffect() 뒤에 빈 배열만 추가해보고 다시 실행해보도록 하자.

input의 이름이 수정되어도 더 이상 useEffect에서 실행하는 콘솔 로그는 표시되지 않는다.

 

useEffect Mount만 실행

 

특정값 리랜더링 시 Effect 건너뛰기

지금은 input이 이름이라는 input으로 하나만 있지만,

만약 여러 개 useState로 다양한 상태 값을 관리하면 어떻게 될까?

내가 추적하지 않아야 하는 값의 상태가 변경되었을 때도 useEffect는 실행된다. 

이럴 경우에는 내가 추적해야 되는 상태 값 외에 나머지 effect 때는 건너뛸 수 있도록 지정해줘야 한다.

 

useEffect 두 번째 인수에 내가 추적할 인수값을 배열로 넘겨준다. 

지금은 이름이 변경될 때만 실행하도록 코드를 짜보도록 하겠다.

 

useEffect.js

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

const Info = () => {
    const [name, setName] = useState('');
    const [age, setAge] = useState('');

    useEffect(() => {
        console.log("name Chage");
        console.log(name);
    }, [name]);

    const onChangeName = (e) => {
        setName(e.target.value)
    };

    const onChangeAge = (e) => {
        setAge(e.target.value)
    };

    return (
        <div>
            <p>이름 : {name} </p>
            <input value={name} onChange={onChangeName}/>

            <p>나이 : {age} </p>
            <input value={age} onChange={onChangeAge}/>
        </div>
    );
};

export default Info

 

현재는 name만을 넘겼지만 여러 개를 넘기는 것도 가능하다.

useEffect Name 수정시에만  실행됨

다시 실행해보면 나이를 바꿨을 댄 useEffect가 실행되지 않고,

이름을 바꿀 때만 useEffect가 실행되는 것을 확인할 수 있다.