Theme. useEffect의 case 분류
크게 3가지로 나누어 살펴보도록 한다.
1. rendering이 완료될 때마다 실행되는 경우
2. 처음 rendering이 되었을 때만 실행되는 경우(초기화의 기능)
3. 특정 값(변수)이 변경될 때에만 실행되는 경우
아래의 각 코드마다 상위에
를 해줘야함을 잊지 말자.
Theme. rendering이 완료될 때마다 실행
주의: 무한 루프에 빠질 수 있음
코드와 함께 살펴보자.
|
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
|
function App() {
const [count, setCount] = useState(0); // 초기값 0
const CountUp = () => setCount(count + 1); // count++, count+=1 사용 불가능
// useEffect(함수, 배열)
useEffect(()=>{
console.log("useEffect!!", count);
})
return (
<div>
<p>count: {count}</p>
{/* 클릭하면 count가 바뀌어서 화면에 나타난다. 따라서 useEffect 실행됨 */}
<button onClick={()=>CountUp()}>count 증가</button>
{/* <button onClick={CountUp}>counter</button> */}
{/* 클릭해도 화면의 변화는 없다 따라서 useEffect 실행 안됨 */}
<button onClick={()=>{console.log('클릭')}}>클릭</button>
</div>
);
}
export default App;
|
cs |
처음 실행하면, useEffect가 실행된다.
즉, count의 초기값은 0이므로 console을 확인해보면, 아래와 같이 실행되는 것을 알 수 있다.
또한 UI를 보면,
count가 증가되는 버튼과 단순히 console에 '클릭'이라는 단어가 찍히는 버튼이 존재한다.
두 가지 버튼의 차이점은 버튼을 눌렀을 때, UI의 변화 여부이다.
위 코드에서
|
1
2
3
|
useEffect(()=>{
console.log("useEffect!!", count);
})
|
cs |
와 같이 작성해줬기 때문에 화면이 새로 rendering이 될 때마다 useEffect가 실행되게 된다.
이때, count 증가 버튼을 누르게 되면 count가 1 증가하게 되는데(CountUp 함수를 정의해뒀으므로)
count: 1으로 새로 rendering이 되기 때문에 useEffect가 실행된다.
아래 결과를 확인해보자.
하지만 만약, 클릭 버튼을 누르게 되면 단순히 console에 '클릭'이라는 단어가 찍힐 뿐 화면의 변화는 없으므로 새로 rendering이 되지 않는다. 따라서 useEffect는 실행되지 않고 아래와 같은 결과가 나타난다.
Theme. 처음 rendering이 됐을 때만 실행
초기화의 기능을 할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function App() {
const [count, setCount] = useState(0);
const CountUp = () => setCount(count + 1); // count++, count+=1 사용 불가능
// useEffect(함수, 배열)
useEffect(()=>{
console.log("useEffect!!", count);
}, [])
return (
<div>
<p>count: {count}</p>
<button onClick={()=>CountUp()}>counter</button>
</div>
);
}
export default App;
|
cs |
위 코드에서 주목할 부분은 아래이다.
|
1
2
3
4
|
// useEffect(함수, 배열)
useEffect(()=>{
console.log("useEffect!!", count);
}, [])
|
cs |
arrow 함수 뒤에 [ ] 이 함께 포함되어 있는데, 이 부분 때문에 처음 rendering 될 때만 useEffect가 실행된다. [ ] 안에 다른 변수가 들어온다면...? 다음 케이스에서 알 수 있다!
위 코드의 결과를 살펴보자.
처음 실행됐을 때, useEffect가 실행되는 것을 확인할 수 있다.
이제 버튼을 눌러 CountUp 함수를 실행시킨 후 결과를 살펴보자.
count는 증가했지만, useEffect는 실행되지 않음을 확인할 수 있다.
Theme. 특정 값(변수)이 변경될 때에만 실행되는 예
|
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
|
function App() {
const [count, setCount] = useState(0);
const [number, setNubmer] = useState(10);
const CountUp = () => setCount(count + 1); // count++, count+=1 사용 불가능
const NumberDown = () => setNubmer(number - 1);
// useEffect(함수, 배열)
useEffect(()=>{
console.log("useEffect!!", count);
console.log("useEffect!!", number);
}, [count]); // count가 변할 때마다 실행 됨(number는 변해도 실행 안됨)
// [count, number] 였으면 count 또는 number가 변할 때 useEffect 실행됨
return (
<div>
<p>count: {count}</p>
<button onClick={()=>CountUp()}>counter</button>
<p>number: {number}</p>
<button onClick={()=>NumberDown()}>NumberDown</button>
</div>
);
}
export default App;
|
cs |
위 코드에서 주목해야 할 부분은
|
1
2
3
4
5
6
7
|
// useEffect(함수, 배열)
useEffect(()=>{
console.log("useEffect!!", count);
console.log("useEffect!!", number);
}, [count]); // count가 변할 때마다 실행 됨(number는 변해도 실행 안됨)
// [count, number] 였으면 count 또는 number가 변할 때 useEffect 실행됨
|
cs |
화면에 count와 number의 값이 나타나므로,
[ ] 안에 들어가는 변수(count 혹은 number)가 변할 때마다 useEffect가 실행된다.
즉, [count] 이면 count가 변할 때마다 useEffect가 실행되고, number가 변하는 것은 영향을 주지 않는다.
만약, [count, number] 였다면 count 또는 number가 변하면 useEffect가 실행된다.
처음 실행했을 때는
이를 기준으로 count를 증가시켰을 때,
처음을 기준으로 number를 감소시켰을 때,
한편, useEffect를 사용하는 다른 코드는 다음과 같다.
이 경우에는 count 또는 number가 변할 때마다 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
|
function App() {
const [count, setCount] = useState(0);
const [number, setNubmer] = useState(10);
const CountUp = () => setCount(count + 1); // count++, count+=1 사용 불가능
const NumberDown = () => setNubmer(number - 1);
function EffectFunc(){
console.log("useEffect!!", count);
console.log("useEffect!!", number);
}
useEffect(EffectFunc, [count, number]);
return (
<div>
<p>count: {count}</p>
<button onClick={()=>CountUp()}>counter</button>
<p>number: {number}</p>
<button onClick={()=>NumberDown()}>NumberDown</button>
</div>
);
}
export default App;
|
cs |
끝.
'React' 카테고리의 다른 글
| [React] file upload & download (0) | 2023.03.30 |
|---|---|
| [React] axios (0) | 2023.03.29 |
| [React] session과 cookie (0) | 2023.03.29 |
| [React] hook - useState (0) | 2023.03.29 |
| [React] 리액트 시작 및 기초 (0) | 2023.03.29 |