lifecycle hook, useEffect

컴포넌트의 생명주기(lifecycle) 중간 중간 액션을 넣을 수 있는 기능

가령 onCreate(), onDistroy() 등등의 기능을 임의적으로 넣을 수 있다.

 

이전 방식(lifecycle hook)

class Detail2 extends React.Component {
    // 가장 많이 쓰는 라이프사이클 훅
    componentDidMount() {   // 화면에 보일 때
    }
    componentWillUnmount() {    // 시야에서 사라질 때
    }

    // 현재 살아있는 라이프사이클 훅
    componentDidCatch(error, errorInfo) {
        // 에러 발생 시
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        // 컴포넌트 업데이트 시
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        // props값이 바꼈거나 컴포넌트가 업데이트 되었을 때 re-rendering을 할지 말지 결정
    }

    // 레거시 함수들(사용 X 권장)
    componentWillMount() {
    }
    componentWillUpdate(nextProps, nextState, nextContext) {
    }
    componentWillReceiveProps(nextProps, nextContext) {
    }

    // 컴포넌트 업데이트 시 호출되는 순서
    /*
    static getDerivedStateFromProps()
    shouldComponentUpdate()
    render()
    getSnapshotBeforeUpdate()
    componentDidUpdate()
     */
}

경험상 이러한 함수들은 자주 쓴다, 안쓴다보다는 어떠한 케이스에 어떠한 함수 안에 기능을 작성할 것인가를 일률적으로 유지하는 것이 중요하다. 컴포넌트의 상태를 변경하는데 하나는 A, 다른 하나는 B에 작성하게 되면 규모가 커졌을 때 유지보수 측면에서 좋지 않다.

 

새로운 방식(useEffect)

function Detail(props) {
	let [alertDiv, setAlertDiv] = useState(true);
    // 보일 때, 업데이트 될 때 등등 자주 실행됨
    useEffect(() => {
        console.log("111111");
        setTimeout(() => {
            console.log("2초 지남");
        }, 2000)

        return function onUndock() {
            console.log("사라질 때");
        }
    });
    useEffect(() => {	// 위 useEffect와 비슷한 기능을 하지만 state를 이용하여 dom 제어
		setTimeOut(() => {
        	setAlertDiv(false);
        }, 3000)
    }, [alertDiv])
    // 여러 개 쌉가능
    // 순서대로 실행됨
    useEffect(() => {

    })
    useEffect(() => {	// props.count가 변경될 때만 실행

    }, [props.count])
    useEffect(() => {	// 빈 배열로 넘기면 최초에 1번, 사라질 때 한 번 실행

    }, [])
    
    return(
    	<>
    	<div id="alert2">test</div>
        {
        	(alertDiv === true)
            ? <div className="alert-div"></div>
            : null
        }
        </>
    )
}

useEffect는 여러 개 작성해도 무방하다.