React 기초 학습 14. useEffect(Zerocho님 강의 학습 의식의 흐름대로 노트 정리)

강의 유튜브 주소 :

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

 

 

useEffect로 업데이트를 감지할 수 있다.

재 렌더링이슈가 없기때문에 state나 props를 쓰지 않으면 앞에서도 말했듯이 일반 함수로 생성하는 것이 좋다.

 

componentDidUpdate가 될때 hooks(useEffect)로 변경할때 힘든 부분이 성능문제다.

useEffect는 1:1로 대응되는 것이 아니기 때문이다.

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

const Lotto = () => {
    const [numbers, setNumbers] = useState(getNumbers());
        const timeouts = useRef([]);    
    
    useEffect(() => {
        //.......... 
    }, []);

    setNumbers(getNumbers());
    timeouts.current = [];
    
    return (
        <div>
        	// ....
        </div>
    );
}

useEffect의 두번째인자가 빈 배열일 경우에는 componentDidMount와 동일하게 동작한다.

만약 componentDidUpdate를 하고 싶다면 두번째인자값에 state나 props를 넣어서 해당 state나 props가 변경되었을때 재 렌더링이 될 수 있도록(호출) 해주면 된다.

이때 componentDidMount의 기능과도 같아진다.

 

return 하는 것이 componentWillUnMount의 기능이다.

const Lotto = () => {
    const [numbers, setNumbers] = useState(getNumbers());
        const timeouts = useRef([]);    
    
    useEffect(() => {
        //.......... 

        return () => { 

            // return 할때 componentWillUnMount와 같다.
            };
    }, []);

    setNumbers(getNumbers());
    timeouts.current = [];
    
    return (
        <div>
        	// ...
        </div>
    );
}

 

componentDidUpdate를 할때 어떤것을 두번째 인자로 넣어야하는가?

조건문은 넣어도 될까?

두번째 인자값은 꼭 state일 필요가 없다.

조건문을 삽입해도 동작한다.

useEffect(() => {
        //.......... 

        return () => { 

            // return 하는 것이 componentWillUnMount
            };
    }, [ win.lenght === 0]);

 

componentDidUpdate와 useEffect는 완벽히 일치할 수 없다.

흉내내기로 보는것이 좋다.