useEffect

리액트 훅을 공부하면서부터 어려운 난관에 부딪혀 이 훅을 제대로 공부하지 않으면 앞으로의 프로젝트와 공부에 더 큰 어려움을 겪을 것 같아 더 자세하게, 왜 사용하는지 어떤 점이 좋은지, 어떻게 사용하는건지 더 자세히 알아보기로 했다.

 

useState로 하는 상태관리에 대해서는 사실 이해가 쉬웠고 사용하고 응용하는데 큰 어려움은 없었다. 

 

하지만 useEffect 부터는 내가 기능을 구현하는 것 뿐만이 아니라 버그도 고치고, 사이드 이펙트가 없는 페이지를 개발해야하니 어디서 어떻게 사용해야하는지 정확히 어려웠다.

 

 

컴포넌트의 상태는 세 가지가 있다.

• Mount: 어떠한 컴포넌트가 생겨나는 시점
• Update: 다시 렌더링 되었을 때(상태가 변화했을 때
• Unmount: 컴포넌트가 사라질 때

이 상태에서 특정 코드를 실행하고 싶을 때 useEffect를 사용한다.

인자로 콜백함수를 받는다.

콜백함수란? 다른 함수의 인자로 전된 함수이다.

 

사용방법

useEffect(() => {})



useEffect에는 두가지 방법으로 사용이 가능하다.

 

1. 인자로 콜백함수만 받을 때

useEffect(() => {
	// 함수
});

: 컴포넌트가 렌더링이 될 때 마다 실행된다. 

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

- 컴포넌트가 다시 렌더링 될 때

 

2. 인자로 콜백함수와 배열을 받을 때

이 때 이 배열은 dependency array라고 한다.

useEffect(() => {
	// 함수
}, [값]);

- 화면에 첫 렌더링이 될 때

- 값이 바뀔 때

 

맨 처음에 화면에 렌더링 될 때, 즉 mount될 때만 실행하고 싶다면 [] 빈 배열을 두번째 인자로 전달한다.

Clean Up

정리라고 부른다.

useEffect안에 서비스를 구독하는 함수를 넣었다고 가정하자.

useEffect(() => {

	// 구독 함수

}, []);

 

이 후에 구독을 해지해 주는 Clean Up, 즉 정리, 종료 작업을 처리 해 주어야 한다.

이 때 return을 사용하여 함수를 넣어준다.

useEffect(() => {

	// 구독 함수
    
    return () => {
    	// 구독 해지 함수
    }
    
}, []);

해당 컴포넌트가 unmount 상태일 때, 다음 렌더링 시 불릴 useEffect가 실행되기 전 return안의 함수가 실행이 된다.