useEffect

목차

• useEffect
  • 구성
    • 첫 랜더링만 작동 (componentDidMount)
    • (ComponentDidUpdate)
• 끝

 

 

useEffect

useEffect는 컴포넌트가 랜더링 될 때마다 지정 작업을 하게 하는 함수이다.

 

useState가 해당 변수가 변화할 때마다, 컴포넌트가 랜더링 하게 만들었다면,

useEffect는 랜더링 했을때의 행동을 지정할 수 있다.

 

좀 더 대단하게 말하자면

useState가 데이터 유형 state를 대체한다면,

useEffect는 lifecycle를 대체할 수 있다.

life Cycle

 

구성

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

export default function App() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>U clicked {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click!
      </button>
    </div>
  );
}

 

결과를 보면서 얘기하자면,

랜더링 했을때의 행동임으로 맨 처음 컴포넌트가 생성될 때도 포함이다.

때문에 콘솔창을보면 초기값인 U clicked 0 도 포함되어있다.

 

 

첫 랜더링만 작동 (componentDidMount)

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

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {  
    console.log("U clicked",count);
  },[]);

  return (
    <div>
      <p>U clicked {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click!
      </button>
    </div>
  );
}

 

해당 코드를 실행시키면 U clicked 0 한 줄밖에 안 뜬다.

useEffect(() => {
  랜더링 했을시 작동함수
}, [해당객체가 변화하였을때 작동]);

useEffect는 이렇게 구성되어있는데,

  useEffect(() => {  
    console.log("U clicked",count);
  },[]);

 

 

여기서 해당 함수는 console.log("U Clicked", count);

가 되겠고,

변화해야 하는 객체 (트리거)는

지금 [ ]로 비어 있다.

즉, 없다는 뜻이므로, 맨 처음 컴포넌트가 랜더링 될 때만 만들어지는 것이다.

(ComponentDidUpdate)

import React, { useState, useEffect, useRef } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  },[count]);

  return (
    <div>
      <p>U clicked {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click!
      </button>
    </div>
  );
}

해당 코드는 count로 인해 재 랜더링 될 때마다 실행된다.

근데.. 좀 자세하기 보면 문제가 하나 있는데,

count가 변함없는 맨 처음에도 실행된다.

 

만약 맨처음 랜더링은 없애고 싶다면,

다른 곳에선 ref 썼던데 어차피 useState 쓸 거

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

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if(count)
      console.log(count);
    else
      ;
  },[count]);

  return (
    <div>
      <p>U clicked {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click!
      </button>
    </div>
  );
}

이렇게 쓰면 된다.

끝