side effect의 실행 필요 시점에 따라,
useEffect의 내부 형식이 바뀝니다.
side effect 실행필요 시점 별상황 별 useEffect 형식은 하기와 같습니다.
겉으로 볼 때에는 비슷하니 정확히 구분하여 익힐 필요가 있어 보입니다.
- side effect 실행필요 시점 별 useEffect -
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
// 1. 페이지가 렌더링 될 때 마다 Side Effect를 실행 해야 할 경우
// dependency와 무관
useEffect(() => {
//실행 필요 함수
});
// 2. 페이지가 최초 렌더링 될 때만 Side Effect를 실행 해야 할 경우
// dependency와 무관
useEffect(() => {
//실행 필요 함수
}, []);
// 3. 페이지가 최초 렌더링 될 때에도 Side Effect를 실행하고,
// 특정 dependency가 업데이트 될 때마다도 Side Effect를 실행 해야 할 경우
useEffect(() => {
//실행 필요 함수
}, [dependency]);
//------------------------------------------------------------------------------------//
// 4. 페이지가 최초 렌더링 될 때에는 Side Effect를 실행하지 않고,
// 렌더링이 끝날 때마다는 Side Effect를 실행 해야 할 경우(memory 정리 등)
// dependency와 무관
useEffect(() => {
return () => {
//실행 필요 함수
};
});
// 5. 본 경우는 Side Effect 내부 함수 실행 자체가 되지 않음
useEffect(() => {
return () => {
//실행 필요 함수
};
}, []);
// 6. 페이지가 최초 렌더링 될 때에는 Side Effect를 실행하지 않고,
// 특정 dependency가 업데이트 되어 렌더링이 끝날 때마다는 Side Effect를 실행 해야 할 경우(memory 정리 등)
useEffect(() => {
return () => {
//실행 필요 함수
};
}, [dependency]);
|
cs |
'웹개발자공부 > React' 카테고리의 다른 글
| React - input box에 입력 한 값 추출 하기(onChange, onKeyDown) (0) | 2022.12.28 |
|---|
