React - useEffect

Side Effect

• useEffect를 알아보기 전에 부작용(Side Effect) 먼저 알아보자.
• 부작용은 일반적으로 부정적인 의미로 사용된다. 하지만 프로그래밍 측면에서는 부수적인 작용이라는 의미로 사용되기 때문에 오해하지 않도록 한다.

let count = 0;

function greetWithSideEffect(name) {
	count = count + 1 // Side Effect
    return `${name}님 안녕하세요!` // output
}

• 다음과 같은 코드는 부작용(Side Effect)이 존재한다라고 말할 수 있다. 외부에 있는 코드를 접근하거나 수정, 읽는 경우 부작용(Side Effect)이 있는 코드가 되는 것이다.
• sideEffect는 랜더링을 막기(block)때문에 랜더링을 먼저 하고 sideEffect가 실행되도록 작성하여야 한다. 만약 sideEffect에서 작업이 오래걸리는 경우 html 코드의 랜더링이 늦어질 것이다. 이러한 문제점은 웹 페이지의 치명적인 문제점이 될 수 있다.
• 우리가 웹 페이지에서 3초 이상의 기다리는 시간이 걸린다면 해당 웹 페이지는 사용하지 않을 것이다...
• 이러한 문제점들로 인하여 useEffect 훅이 탄생하게 된 것이다.

 

useEffect

예시1) useEffect훅 기본 구조

• useEffect 훅의 기본 구조는 useEffect(callback 함수, dependency Array) 이다.
• userEffect 훅을 작성한 컴포넌트는 처음 작동한 경우, update(재랜더링)된 경우에 실행된다.
• useEffect 훅은 html 코드를 먼저 랜더링 한 후 내부에 있는 작업을 수행한다. 
• 시간이 오래걸리는 작업들, 서버에서 데이터를 가져오는 경우, 타이머 장착, 등의 경우에 useEffect 훅을 사용하면 유용하다.
• useEffect를 여러 개 사용한 경우 순서대로 실행한다.

 

useEffect dependency Array 

• dependency Array는 처음 한번 또는 어떠한 값이 변경됬을 경우 useEffect의 실행을 여부를 제어할 수 있다. 즉 실행 타이밍을 결정할 수 있는 것이다.

예시2) dependency Array에 빈배열을 담은 경우

 

• dependency Array에 [count]가 작성되었다면 count 값이 변했을 때 마다 useEffect가 실행해!라는 의미를 지니고 있다.

예시3) dependency Array에 count가 변할 때 마다 작동되는 경우

 

• 정리하자면 빈배열인 경우 처음에만 실행-> 의존성 배열의 값이 하나일 경우 그 값이 변할 때 마다 실행 -> 2개의 값이 존재한다면 하나의 값만 변해도 실행

 

Clean up Effect

• useEffect훅 내부에 return문을 사용할 수 있는데 이것은 useEffect 동작 전에 실행되는 구문이다.
• 이를 clean up function이라고 한다. (주변을 전부 정리하는 개념)
• 흔히 이벤트 리스너(EventListener)를 등록했거나 구독하였을 경우 clean up을 해줄 필요가 있다.
• 예를 들어  clean up function를 생략하고 서버로 데이터를 요청하였을 경우 계속해서 데이터를 요청할 것이다.
• clean up function을 통하여 기존 데이터 요청을 제거하자! 

 

 

useEffect 테스트

예시4) Clean up Effect Test

• 테스트를 위하여 다음과 같은 코드를 작성하였다.

 

예시5) Clean Up Effect Result

• 다음 결과를 보면 return 내부의 출력을 먼저 하고 2가 출력되는 것을 볼 수 있다.

 

useEffect 타이머 활용

useEffect를 이용해서 2초 후 box가 사라지는 코드를 작성해보자!

*setTimeout() 을 사용하여 지정 시간 후에 실행되는 코드를 작성할 수 있다.

 

 

예시6) state 선언

 

• 우선 alert 변수에 true값을 먼저 줘서 box가 나타나고 있다.

예시7) alert-true

 

예시8) useEffect 작성

• setTimeout함수를 사용해서 2000밀리세컨드(2초) 후에 alert 변수에 false를 할당
• clearTimeout함수를 활용하여 기존 타이머를 제거(눈에는 보이지 않지만 타이머가 계속해서 요청되고 있다.)

 

예시9) true & false

• alert가 참이면 다음과 같은 box가 출력이 되고 false인 경우에는 null 빈 값을 줘서 2초 후 box가 제거되는 효과를 볼 수 있다.

 

예시10) 결과

---

conclusion

useEffect(()=>{ }) // 재렌더링마다 코드를 실행하고 싶으면
useEffect(()=>{ }, []) // mount시 1회 코드를 실행하고 싶으면
useEffect(()=>{
	return ()=> {
    					// unmount시 1회 코드를 실행하고 싶으면
    }
}, [])

* mount = 처음 페이지가 렌더링 될 때

* unmount = 컴포넌트가 화면에서 사라질 때