[React] 라이프사이클(LifeCycle)

---

 

 

컴포넌트는 페이지에 장착되기도 하고(mount), 업데이트가 되며(update), 필요없으면 제거(unmount)된다.

라이프사이플을 사용하면 중간중간 간섭하고 실행할 수 있다.

 

 

◽ useEffect() 사용하기

useEffect()는 HTML 렌더링 이후에 동작한다.

 

1. 오래걸리는 반복연산

2. 서버에서 데이터를 가져오는 작업

3. 타이머

등은 useEffect안에서 사용하는 것이 좋다.

 

 

예제 1. class 문법을 사용하는 기존 방식

class lifeCycle extends React.Component {
    componentDidMount() {
    	// ...
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
    	// ...
    }

    componentWillUnmount() {
    	// ...
    }
}

 

예제 2. 최근 방식

function Detail(props) {
    // useEffect()는 HTML 렌더링 후 동작한다.
    useEffect(() => {
        console.log('안녕!');
    })

 

 

---

 

 

◽ useEffect() 실행조건

1) mount 시 1회만 호출하기

// mount 시 1회만 호출하기
useEffect(() => {
    setTimeout(() => {
        setIsAlertShow(false)
    }, 2000)
}, []) // 빈 배열([])을 사용한다.

 

2) 특정 변수가 변할 때만 동작하도록 지정하기

useEffect(() => {
    setTimeout(() => {
        setIsAlertShow(false)
    }, 2000)
}, [특정한 변수]) // 변수가 변경될 때만 useEffect()가 실행된다.

 

3) return 사용하기

컴포넌트가 unmount 될 때에도 clean up function 안에 있는 로직이 실행된다.

예시 1) 타이머 로직을 넣는 경우 다시 마운트 될 때 마다 타이머가 중복될 수 있으므로 return 안에서 타이머를 제거한다.

예시 2) 서버에 데이터를 요청하는 경우 다시 마운트 될 때 마다 중복으로 호출 될 수 있으므로 return 안에서 기존 호출을 중단한다.

useEffect(() => {
    setTimeout(() => {
        setIsAlertShow(false)
    }, 2000)

    return () => {
        // useEffect()기 실행되기 전에 실행한다.
        // 'clean up function' 이라고 불린다.
    }
}, [])

function TabContent({ tabIndex }) {
    let [fade, setFade] = useState('')

    useEffect(() => {
        setTimeout(() => {
            setFade('end')
        }, 100)

        return () => {
            setFade('') // 클래스 초기화
        }
    }, [tabIndex])

    const compArr = [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>]
    return (
        <div className={`start ${fade}`}>
            { compArr[tabIndex] }
        </div>
    )
}

 

---

 

출처

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌