REACT Hooks 노트 useEffect 정리

useEffect

- 리액트 컴포넌트가 렌더링이 될 때, 될 때마다 특정 작업을 실행할 수 있는 리액트 hook이다.

- mount : 화면에 첫 렌더링
- Update : 리렌더링
- Unmount : 화면에서 사라질 때

이 3개의 상황에서 useEffect 내부에 있는 코드가 실행된다고 생각하면 된다.

---

- useEffect는 2개의 인자를 받는다.

- 첫번째는 콜백함수, 두번째는 배열( [], dependency array )을 받는다. 그래서 일반적으로 두가지 사용법이 있다.

useEffect(() => {

})

- 컴포넌트가 화면에 처음 렌더링 될때,

- 컴포넌트가 리렌더링이 될때

 

 

useEffect(() => {

}, [value])

- 컴포넌트가 화면에 처음 렌디링이 될때,

- [value]배열안에 들어있는 값이 바뀔때 실행

 

 

useEffect(() => {

}, [])

- 화면에 처음 렌더링 될때만 실행

- 그 후에는 실행되지 않음

---

useEffect내부에 코드를 종료시키거나 타이머 또는 event를 종료시킬때에는? = Clean Up

useEffect(() => {
	// 곽튜브 구독
    
    return () => {
    	// 곽튜브 구독 해제
	}
    
}, [value])

- return 값으로 함수를 넣어주면 된다.

- Unmount 또는 useEffect가 리렌더링 되기 전에 종료시킨다.

 

---

- useEffect 내부에는 현재 console.log로 "렌더링"문자가 호출된다.

- count, input이 변화가 되면 렌더링이 계속된다.

- 이와 같이 렌더링이 될때마다 useEffect는 내부에 있는 코드가 재실행되는 것이다.

---

그럼 count에서만 useEffect함수가 실행하게 하려면 어떻게 해야할까?

 

바로 두번째 인자인 []배열안에 변화하는지 감시하도록 count를 넣어주면된다.

그럼 이제 count값이 변화할때마다 console에는 "렌더링"이 나오지만

input에 입력할때는 console이 나오지 않는다.

 

---

Clean up

const Timer = () => {
    useEffect(() => {
    	const timer = setInterval(() => {
        	console.log("타이머")
        }, 1000)
    }, [])
};

- 만약 이렇게 useEffect를 사용하게 되면 timer는 화면에 처음 렌더링이 될때 1초씩 타이머가 돌아가게된다.

- 여기서 []을 넣었기 때문에 화면에 처음 렌더링 될때만 실행이 되지만 새로 리렌더링이 되더라도 타이머는 멈추지 않는다.

- Unmount가 될때 = 화면에서 사라질 때 return 으로 setInterval을 종료시키는 함수를 넣어주어야한다.

 

const Timer = () => {
    useEffect(() => {
    	const timer = setInterval(() => {
        	console.log("타이머")
        }, 1000)
        
       	return () => {
        	clearInterval(timer)
        }
        
        
    }, [])
}

- 이렇게 return에 clearInterval을 통해서 타이머를 멈추는 코드를 넣어주게 되면!

- useEffect가 처음 렌더링 될때는 타이머가 시작되고 화면에서 사라지게 되면 return을 통해서 타이머는 멈추게 된다.

 

- return을 통해서 종료시키지 않는다면 현재코드에서는 console에 "타이머"는 1초간격으로 계속 나오게 된다.

- 복잡한 로직이나 긴 코드 함수가 종료되지않고 계속 실행될 수 있다는걸 잊지말자.