React Hooks - useEffect

목차

1. useEffect

2. 사용방법

3. 예제코드

 

1. useEffect

 

 

useEffect는 컴포넌트가 생명주기에 따라 마운트, 업데이트, 언마운트 되었을 때 작업코드를 실행시키고 싶다면,

 

useEffect를 이용하면된다.

 

 

2. 사용방법

 

 

아래의 useEffect는 화면이 렌더링 될 때마다 콜백함수가 실행된다.

useEffect( ( ) => { 작업코드 })

 

 

반면 아래의 useEffect는 두번째 인자의 값이 변경될 때마다 콜백함수가 실행된다.

 

빈 배열을 넣는다면 맨 처음만 렌더링된다.

 

useEffect( ( ) => { 작업코드 }, [ value ])

 

 

마지막으로 아래의 방식으로 작성하게되면, 컴포넌트가 언마운트될 때 return안의 코드가 실행된다.

useEffect( ( ) => { 작업코드
    return ( ) => {
        // 언마운트시 실행코드
} }, [ value ])

 

 

 

3. 예제코드

 

 

다음의 코드는 첫 화면이 렌더링 될 때 모든 useEffect가 실행되고 이후에는

 

useEffect의 두번째 인자인 의존성 배열을 감지하여 value값이 변경될 때마다 실행되는 코드이다.

 

count 값이 5이상이 될때 UnMountComponent가 UnMount 된다.

 

UnMount가 되는 동시에 컴포넌트 안의 useEffect의 첫번쨰 콜백의 리턴이 실행된다.

 

import { useEffect, useState } from "react"

const UnMountComponent =() => {
    useEffect(() => {
        return () => {
            console.log('언마운트')
        }
    }, [])

    return <div>언마운트</div>
}

const App = () => {
    const [count, setCount] = useState(0)

    const handleClick = () => {
        setCount(count+1)
    }

    
    useEffect(() => {
        console.log('componentDidMount')
    }, [])
    
    useEffect(() => {
        console.log('componentDidUpdate')
    }, [count])

    return(
        <div>
            <button onClick={handleClick}>클릭</button>
            <div> count: {count}</div>
            {count < 5 ? <UnMountComponent /> : <></>}
        </div>
    )
}

export default App