❓ useEffect()
useEffect는 리액트 컴포넌트가 mount 됐을 때, update 됐을 때 특정 작업을 처리할 수 있게하는 Hook이다.
❗ useEffect 셋팅 및 사용법
import { useEffect } from "react";
js파일의 상단에 import를 해주고
useEffect(() => {
//기능
})
이렇게 사용하면 된다 !!!
그러면 어떠한 컴포넌트 내에서 정의되어 있는 useEffect( )내부의 기능은 해당 컴포넌트가 mount, update시 정의한 기능이 실행된다.
예제를 가볍게 보며 실행 방법에 대해 알아보자
let [count, setCount] = useState(0);
useEffect(() => {
console.log("plus")
})
<button onClick={() => {setCount(count+1)}}> 버튼 </button>
이렇게하면 버튼 클릭 때 마다 컴포넌트는 update되므로 콘솔에 "plus"가 출력된다
let [count, setCount] = useState(0);
useEffect(() => {
})
console.log("plus")
<button onClick={() => {setCount(count+1)}}> 버튼 </button>
그런게 이렇게 해도 plus가 찍힌다....
여기서 궁금한 점
❗ 왜 useEffect를 쓸까 ?
"useEffect는 실행 시점이 html 렌더링 후에 동작을 한다"
그러므로 위에서 다뤘던 useEffect 내부의 코드는 html 렌더링이 완료된 후에 console.log("plus")가 동작하지만
밑에서 다룬 코드는 렌더링이 완료되기 전에서도 console.log("plus")가 동작하고 완료된 후에도 동작한다.
글만 봐서 모르겠다면 바로 예시를 보자
for (var i = 0 ; i < 100000 ; i++){
console.log("i");
}
이렇게 10만번 반복하는 코드가 있다고 가정하자.
해당 코드가 배치되는 위치에 따라 엄청난 차이를 보인다.
for (var i = 0 ; i < 100000 ; i++){
console.log("i");
}
return (
<div> 안녕 </div>
)
해당 코드의 문제점은 자바스크립트의 코드 특성상 반복문을 돌고 밑에 있는 HTML 태그를 렌더링 해준다.
그러면 10만번을 반복하는 반복문을 다 돌고서야 HTML 태그가 출력되는 것이다.
이런 웹사이트가 있다면 그 누구도 해당 웹사이트를 방문하지 않을것이다.
useEffect(() => {
for (var i = 0 ; i < 100000 ; i++){
console.log("i");
}
})
return (
<div> 안녕 </div>
)
하지만 이렇게 useEffect()를 활용한다면 HTML 태그를 렌더링 해준 뒤 반복문이 돌게 된다.
❗ useEffect의 사용 용도
- 어렵고 오래걸리는 연산을 할 때
- 서버에서 큰 데이터를 가져오는 작업을 할 때
- 디버깅 할 때
❗ 상황별 사용되는 useEffect()
1. 랜더링 될 때마다 안의 내용 실행
useEffect(() => {
});
2. 처음 마운트 될 때 1번만 실행
useEffect(() => {
}, []);
3. dependency 값이 변경 될 때마다
useEffect(() => {
console.log("안녕하세요")
}, [data]);
- 만약 dependency 부분에 여러개가 들어온다면 그중에 1개 라도 업데이트되면 리렌더링 된다.
useEffect(() => {
console.log("안녕하세요")
}, [data1, data2]);
4. clean up Effect
이전에 일으킨 Side Effect를 정리할 필요가 있을 때 사용 ! (unmounttㅣ 1회 코드 실행 함)
예시) react 를 사용해서 spa 를 만드는데 그렇게 되면 해당 페이지를 벗어나도 앞서 동작했던 기능들은 계속 살아있다. 그렇기 때문에 이 이벤트 리스너를 없앨 필요가 있다. 이때 return에 이 를 작성해 clean up 해 줄 수 있다!
** unmount 상황에서 동작 순서
1. return () => { // 동작 } 의 내부 코드 실행
2. useEffect() 내부 코드 실행
으로 실행이 되고
** mount 상황에서는 useEffect() 내부 코드만 실행이 된다.
이해를 위한 예시를 만들어두고 이해해보자.
useEffect(() => {
let timer = setTimeout(() => {
console.log("안녕")
}, 2000)
})
위의 코드는 2초가 지나면 콘솔창에 안녕을 출력하는 useEffcet이다.
해당 코드의 문제점은 여러 번 재랜더링 시 useEffect가 중첩이 될 것이다.
useEffect(() => {
let timer = setTimeout(() => {
console.log("안녕")
}, 2000)
return () => {
clearTimeout(timer)
}
}, [])
해당 코드처럼 return () => {}을 사용하여 Effect를 clean up 해주면 위에서 발생한 문제는 해결된다 !
❗ sideEffect ?
React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 Side Effect라고 한다.
대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우,일단 화면에 렌더링할 수 있는 것들을 먼저 렌더링하고
실제 데이터는 비동기로 가져오는 것이 권장된다.
요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 사용자 경험 측면에서 유리하기 때문이다.
- 함수에서 함수안의 내용물로만 결과값을 만드는 것, 이외의 다른 행위들 -> sideEffect
- 함수의 output을 만들기 위해 외부의 값을 사용해도 -> sideEffect
- 외부 변수를 함수 안에서 변경 시킴 -> sideEffect
'자바스크립트 - React.js' 카테고리의 다른 글
[React.js] 성능개선 2 : 재렌더링을 막는 memo, useMemo (0) | 2022.12.05 |
---|---|
[React.js] 성능개선 1 : lazy import (1) | 2022.11.29 |
[React.js] Router 라이브러리에 대해서 (2) | 2022.11.14 |
[React.js] CSS-in-JS (Styled-components)에 대하여 (0) | 2022.11.10 |
[코딩애플/React.js] input 태그를 활용한 글 생성, 수정 예제 풀이 (1) | 2022.10.25 |