[React] useEffect

React의 useEffect

useEffect가 사용되는 경우는 다음 세가지다.

a. 컴포넌트가 화면에 첫 렌더링 될 때 (Mount)

b. 컴포넌트가 다시 렌더링 될 때 (Update)

c. 렌더링이 화면에서 사라질 때 (Unmount)

위의 세가지 경우에서 해당 시점에 특정 작업을 실행시키고 싶다면 useEffect 를 사용한다.

기본 구조는 다음과 같다. useEffect(() => {})

대체로 {} 안에 인자로 Callback 함수를 받는다. Callback 함수로 원하는 작업에 해당하는 함수를 삽입하면 된다.

선언하는 방식은 두 가지다.

`useEffect(() => { //함수 });`  👉 렌더링 될 때마다 실행됨

`useEffect(() => { //함수 }, [value]);` 👉 첫 렌더링 시점과 배열안의 값이 바뀔 때 실행됨

함수만 넣어 선언하거나, 함수와 배열(dependency array)을 넣어 선언한다.

간단한 예시를 들어보도록 한다.

count 란 변수가 update 될 때마다 실행되도록 하는 코드를 만들고자 한다.

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

function App() {
  const [count, setCount] = useState(1);
  
  const handleCountUpdate = () => {
    setCount(count + 1);
    );
    
    useEffect(() => {
      console.log('count'); 
    }); // 배열인자 없이 함수 인자만 호출되었기에 렌더링 될 때마다 계속 출력된다.
    
    return (
      <div>
      <button onClick={handleCountUpdate}>Update</button>
  	  <span>count: {count} </span>
  	  </div>
  	);
}

export default App;

버튼을 클릭할 때 handlecountUpdate 에 의해서 count 가 +1 되게 된다.

이와 같은 코드에서 useEffect 부분을 배열 인자 없이 호출했기에 렌더링 될 때마다 콘솔창에 count가 계속 출력된다.

만약, count 만 수정될 때만 실행되게 하고 싶다면 배열에 [count]만 추가하면 된다. 해당 코드는 아래와 같다.

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

function App() {
  const [count, setCount] = useState(1);
  
  const handleCountUpdate = () => {
    setCount(count + 1);
    );
    
    useEffect(() => {
      console.log('count');
    }, [count]); // count 가 바뀔 때만 실행된다. 
    
    return (
      <div>
      <button onClick={handleCountUpdate}>Update</button>
  	  <span>count: {count} </span>
  	  </div>
  	);
}

export default App;