Effect Hook

Effect Hook

Effect Hook도 State Hook처럼 클래스형 컴포넌트에서 사용할 수 있는 메소드를 함수형 컴포넌트에서도 사용가능하게 만들어 주는데

바로 class의 생명주기 메소드들을 사용하능하게 해준다

아래에서 알아보자

사용법

import React, {useEffect} from 'react';

State와 같이 임포트를 해주어야 함수형 컴포넌트 내에서 사용이 가능하다

State Hook에서 사용했던 코드에 useEffect만 살짝 추가해보자

function Counter(){
    const [count,setCount] = useState(0);

    useEffect(()=>{
        document.title = `You clicked ${count} times`;
    });

    const handleClick = (e)=>{
        if(e.target.innerText==='+') setCount(count+1);
    };

    return (
        <Fragment>
            <h1>Count</h1>
            <h2>{count}</h2>
            <button onClick={handleClick}>+</button>
        </Fragment>
    );
}

이 코드를 실행해보면 count의 변화가 감지되어 렌더링하고 난 후 페이지의 타이틀도 바뀌게 되는 것을 알 수 있다

렌더링 후에 수행되는 코드..?

우리는 이렇게 동작하는 메소드를 이미 배웠었다 바로 클래스의 생명주기 메소드 중에 componentDidMount와 정확하게 일치한다