41.기본이 탄탄해야한다. 탄앤탄스 [useEffect에 대한 고찰]

// 모든 리렌더링마다 로그가 찍힘
  useEffect(() => {
    console.log("call useEffect after every re-render");
  }); 

 // value 변수 값이 변할 때만 로그가 찍힘
  useEffect(() => {
    console.log("call useEffect when value changes");
  }, [value]);

 // 첫 렌더링 후에만 로그가 찍힘.
  useEffect(() => {
    console.log("call useEffect only after initial render");
  }, []); 

 

#Lifecycle

컴포넌트가 페이지에 장착된다 (mount )

컴포넌트가 업데이트된다 (update)

컴포넌트가 삭제된다 (unmount)

라이프사이클 중간중간 코드 실행 가능

class Detail2 extends React.Component {
componentDidMount(){
//마운트될 때 실행할 코드
}
componentDidUpdate(){
//업뎃될 때 실행할 코드
}
componentWillunmount(){
//언마운트 될 때 실행할 코드
}
}

 

function Detail(props){
    useEffect(()=> {
    //여기 적는 코드는 mount, update될 때 실행됨
    })
}

useEffect안에있는 코드는 html렌더링 후 동작한다. -> 효율적인 동작. html을 먼저 보여주고 어려운 작업 수행. 빠른 렌더링. 시간 오래걸리는 코드를 useEffect내부에 적으면 좋음. 어려운 연산, 서버에서 데이터 가져오는 작업, 타이머 장착,  등을 많이 이용.

dependency를 추가하면 마운트될 때 + 그 변수가 변할 때만 실행됨.

dependency를 비워둔다 -> 최초 마운트될 때만 한번 실행되고 업데이트될 떄는 실행되지 않음. 

useEffect 동작 전에 실행되는 clean up function
return ()-> {}

function App() {

    const [a, setA] = useState(true);

    useEffect(() => {

    	const timer = setTimeout(() => setA(false), 3000);

    	return () => {

    		clearTimeout(timer);

    		//타이머 제거하는 함수

    	};

    }, []);

    return <div>{a && <Popup>3초 내 구매하면 완쁠완 혜택!</Popup>}</div>;

}

서버로 데이터 요청할 때도 useEffect많이 쓰는데 업데이트 될 때마다 재요청하면 안되니까, cleanup function을 활용.
return ()=> {
//기존데이터요청은 제거해주세요 하는 함수
}

 

`cleanup` 함수는 `useEffect` 에 대한 뒷정리를 해준다고 이해하시면 되는데요, `deps` 가 비어있는 경우에는 컴포넌트가 사라질 때 `cleanup` 함수가 호출됩니다.

---

참고한 블로그
https://www.rinae.dev/posts/a-complete-guide-to-useeffect-ko#%EB%AA%A8%EB%93%A0-%EB%9E%9C%EB%8D%94%EB%A7%81%EC%9D%80-%EA%B3%A0%EC%9C%A0%EC%9D%98-prop%EA%B3%BC-state%EA%B0%80-%EC%9E%88%EB%8B%A4

[번역] useEffect 완벽 가이드