[React] Hook함수 - useEffect 사용하기

useEffect 를 사용하면 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있게 함

 

구문 : useEffect(콜백함수)

1) 렌더링 될 때마다 매번 실행하기

useEffect(() => {
	실행할코드;
})

 

2) 화면에 첫 렌더링 될 때 실행하기 (마운트되고 딱 한 번만 실행)

useEffect(() => {
	실행할코드;
}, []) // 빈 배열을 넣음으로서 구독하는 값이 없다는 걸 확인시켜줌 
// 마운트나 렌더링이 되든 말든 신경 쓰지 않음

 

3) 화면에 첫 렌더링 될 때 실행 + value값이 변경될 때만 실행하기

useEffect(() => {
	실행할코드;
}, [value])

 

4) 마운트 됐을 때 실행 + 언마운트 됐을 때 실행하기

useEffect(() => {
	마운트 됐을 때 실행할코드;
    return () => {
    	언마운트 됐을 때 실행할코드;
    }
}, [])