[React] useEffect / 의존성배열

🔥 useEffect?

리액트 컴포넌트가 렌더링 될때마다 특정작업을 수행하도록 설정할 수 있는 Hook함수이다.
정리하면, 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면, 또는 어떤 컴폰너트갛 ㅘ면에서 사라졌을 때 무언가를 실행하고 싶다면 useEffect를 사용한다.

import React, { useEffect } from "react";
const App = () => {
  useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello useEffect");
  });
  return <div>Home</div>;
}
export default App;

// 하지만 useEffect는 useEffect가 속한 컴포넌트가 화면에 렌더링될때마다 실행되기 때문에 
// 의도치않은 동작을 경험할 수 있는데
// 아래코드에서는
import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  useEffect(() => {
    console.log("hello useEffect");
  });

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

실행하보면 input에 값을 입력해줄 때 마다 무한 렌더링이 일어나는 것을 경험할 수 있다. 그래서 위의 경우를 방지하기 위해 의존성 배열이라는 것을 사용할 수 있다.

---

🔥 의존성 배열

배열에 값을 넣으면 그 값이 바뀔때만 useEffect를 실행하는 구문이다.

코드의 기본 뼈대는 아래와 같다.

useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

---

// 의존성 배열이 빈 배열인 경우
import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log("hello useEffect");
  }, []); // 비어있는 의존성 배열

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

// 의존성 배열에 값이 있는 경우
import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log("hello useEffect");
  }, [value]); // value를 넣음

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

의존성 배열에 value라는 값을 넣어줬더니 위에 다뤘던 무한렌더링의 콘솔창과 같이, input값이 바뀔 때 마다 useEffect함수가 실행되는 것을 볼 수 있다.

---

🔥 클린업 활용

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const 속세 = () => {
  const nav = useNavigate();

  useEffect(() => {
    return () => {
      console.log(
        "안녕히 계세요 여러분! 전 이 세상의 모든 굴레와 속박을 벗어 던지고 제 행복을 찾아 떠납니다! 여러분도 행복하세요~~!"
      );
    };
  }, []);

  return (
    <button
      onClick={() => {
        nav("/todos");
      }}
    >
      속세를 벗어나는 버튼
    </button>
  );
};

export default 속세;

위 코드의 버튼을 누르게되면 useNavigate()에 의해서 /todos로 이동하면서 속세 컴포넌트를 떠나고, useEffect부분의 return부분이 실행된다.

---

React Strict Mode?

우리가 리액트를 쓰면서 콘솔에 찍어보는 일이 생기는데, 콘솔에 찍을때마다 2번씩 값이 찍히는 것을 볼 수 있는데, 이는 React Strict Mode 때문이다.

strict mode는
애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이고,
Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화한다. 개발모드에서만 활성화 되기 때문에, 프로덕션 빌드에는 영향을 끼치지않는다.