[React] hook - useEffect

Theme. useEffect의 case 분류

 

크게 3가지로 나누어 살펴보도록 한다.

1. rendering이 완료될 때마다 실행되는 경우

2. 처음 rendering이 되었을 때만 실행되는 경우(초기화의 기능)

3. 특정 값(변수)이 변경될 때에만 실행되는 경우

 

아래의 각 코드마다 상위에 

import React, { useEffect, useState } from "react";

를 해줘야함을 잊지 말자.

 

Theme. rendering이 완료될 때마다 실행

 주의: 무한 루프에 빠질 수 있음

코드와 함께 살펴보자.

 

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;

 

처음 실행하면, useEffect가 실행된다.

즉, count의 초기값은 0이므로 console을 확인해보면, 아래와 같이 실행되는 것을 알 수 있다.

 

또한 UI를 보면,

 

 

count가 증가되는 버튼과 단순히 console에 '클릭'이라는 단어가 찍히는 버튼이 존재한다.

두 가지 버튼의 차이점은 버튼을 눌렀을 때, UI의 변화 여부이다.

 

위 코드에서

 

useEffect(()=>{
    console.log("useEffect!!", count);
  })

 

와 같이 작성해줬기 때문에 화면이 새로 rendering이 될 때마다 useEffect가 실행되게 된다.

 

이때, count 증가 버튼을 누르게 되면 count가 1 증가하게 되는데(CountUp 함수를 정의해뒀으므로)

count: 1으로 새로 rendering이 되기 때문에 useEffect가 실행된다.

아래 결과를 확인해보자.

 

 

하지만 만약, 클릭 버튼을 누르게 되면 단순히 console에 '클릭'이라는 단어가 찍힐 뿐 화면의 변화는 없으므로 새로 rendering이 되지 않는다. 따라서 useEffect는 실행되지 않고 아래와 같은 결과가 나타난다.

 

 

Theme. 처음 rendering이 됐을 때만 실행

 초기화의 기능을 할 수 있다.

 

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;

 

위 코드에서 주목할 부분은 아래이다.

 

// useEffect(함수, 배열)
    useEffect(()=>{
      console.log("useEffect!!", count);
    }, [])

 

arrow 함수 뒤에 [ ] 이 함께 포함되어 있는데, 이 부분 때문에 처음 rendering 될 때만 useEffect가 실행된다. [ ] 안에 다른 변수가 들어온다면...? 다음 케이스에서 알 수 있다! 

 

위 코드의 결과를 살펴보자.

 

처음 실행됐을 때, useEffect가 실행되는 것을 확인할 수 있다.

 

 

이제 버튼을 눌러 CountUp 함수를 실행시킨 후 결과를 살펴보자.

 

 

count는 증가했지만, useEffect는 실행되지 않음을 확인할 수 있다.

 

 

Theme. 특정 값(변수)이 변경될 때에만 실행되는 예

 

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;

 

위 코드에서 주목해야 할 부분은

 

// useEffect(함수, 배열)
  
  useEffect(()=>{
    console.log("useEffect!!", count);
    console.log("useEffect!!", number);
  }, [count]); // count가 변할 때마다 실행 됨(number는 변해도 실행 안됨)
  // [count, number] 였으면 count 또는 number가 변할 때 useEffect 실행됨

 

화면에 count와 number의 값이 나타나므로,

[ ] 안에 들어가는 변수(count 혹은 number)가 변할 때마다 useEffect가 실행된다.

즉, [count] 이면 count가 변할 때마다 useEffect가 실행되고, number가 변하는 것은 영향을 주지 않는다.

만약, [count, number] 였다면 count 또는 number가 변하면 useEffect가 실행된다.

 

처음 실행했을 때는

 

 

 

이를 기준으로 count를 증가시켰을 때,

 

 

처음을 기준으로 number를 감소시켰을 때,

 

 

 

한편, useEffect를 사용하는 다른 코드는 다음과 같다.

이 경우에는 count 또는 number가 변할 때마다 useEffect가 실행되도록 하겠다.

 

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;

 

끝.