[React] Side Effect와 useEffect()

Side Effect 란

React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컽습니다.
대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우,
일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장됩니다.
요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 사용자 경험 측면에서 유리하기 때문입니다.

---

useEffect() 란

• 컴포넌트가 랜더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook입니다.

---

useEffect() 사용법

useEffect 함수의 기본형은 다음과 같습니다.

useEffect(function, deps)

예시 1
컴포넌트가 랜더링 될 때마다 실행

useEffect(() => {
	console.log("i run every time");
});

예시2
최초 랜더링시에만 실행

useEffect(() => {
  console.log("i run only once.");
}, []);

예시3
특정 값이 변경될 때에만 실행

const [counter, setValue] = useState(0);

useEffect(() => {
  console.log("i run when 'counter' changes.");
}, [counter]);

값이 여러개일 경우

const [counter, setValue] = useState(0);
const [keyword, setKeyword] = useState("");
  
useEffect(() => {
  console.log("i run when 'keyword' & 'counter' changes.");
}, [keyword, counter]);

---

Cleanup

컴포넌트가 사라질때 또는 update 되기 직전에 호출하는 함수를 Cleanup함수 라고 합니다.
(return 뒤에 나오는 함수이며 useEffect의 뒷정리 함수라고 합니다.)

아래와 같이 사용 할 수 있습니다.

//예시1
function Hello() {
  function hiFn() {
    console.log("hi");
    return byFn;
  }

  function byFn() {
    console.log("bye");
  }

  useEffect(hiFn, []);
  return <h1>Hello</h1>;
}

//예시2
useEffect(() => {
  console.log("hi");
  return () => console.log("bye");
}, [])

---

---

Reference

노마드 코더 ReactJS로 영화 웹 서비스 만들기
https://nomadcoders.co/react-for-beginners/lobby

React 공식 사이트
https://ko.reactjs.org/docs/hooks-reference.html#useeffect