리액트 숙련(React Hooks - useEffect)

# useEffect

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 

어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶거나 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶을때 useEffect를 사용한다. 

 

// src/App.js

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

App 컴포넌트가 화면에 렌더링될 때 useEffect 안에 있는 console.log가 실행된다. 컴포넌트가 렌더링 될 때 실행된다. 이게 바로 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에 값을 입력해줄때마다 onChange 이벤트가 실행되어 렌더링이 되는데 타이핑을 하나씩 할때마다 useEffect() 가 실행돼 console이 찍히게 된다. 

 

전체 흐름은 아래와 같다.

1. input에 값을 입력한다.
2. value, 즉 state가 변경된다.
3. state가 변경되었기 때문에, App 컴포넌트가 리렌더링 된다.
4. 리렌더링이 되었기 때문에 useEffect가 다시 실행된다.
5. 1번 → 5번 과정이 계속 순환환다.

 

 

# 의존성 배열

의존성 배열(dependency array) 이란?

 

useEffect에는 의존성 배열이라는 것이 있다. 쉽게 풀어 얘기하면 “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게” 라는 것이다. 

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

 

 

# 의존성 배열이 빈 배열인 경우

우리가 input에 어떤 값을 입력하더라도, 처음에 실행된 hello useEffect외에는 더 이상 실행이 되지 않게된다. 이렇게 useEffect를 사용하는데, 어떤 함수를 컴포넌트가 렌더링 될 때 단 한번만 실행하고 싶으면 의존성 배열을 [ ] 빈 상태로 넣으면 됩니다.

 

 

// src/App.js

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를 넣게 된 경우 value 값이 변할때마다 useEffect()를 실행하라는 의미이므로 input에 변화가 생길때마다 실행되게 된다. 

 

 

 

# clean up

# 클린 업 이란?

 

컴포넌트가 사라졌을 때 무언가를 어떻게 실행하는 과정을 클린 업 (clean up) 이라고 표현한다. 

 

# 클린 업 하는 방법

 

useEffect 안에서 return 을 해주고 이 부분에 실행되길 원하는 함수를 넣으면 된다. 

// src/App.js

import React, { useEffect } from "react";

const App = () => {

	useEffect(()=>{
		// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수를 넣어주세요.

		return ()=>{
			// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수를 넣어주세요.
		}
	}, [])

	return <div>hello react!</div>
};

export default App;

---

# 정리

• useEffect는 화면에 컴포넌트가 mount 또는 unmount 됐을 때 실행하고자 하는 함수를 제어하게 해주는 훅이다.
• 의존성 배열을 통해 함수의 실행 조건을 제어할 수 있다.
• useEffect 에서 함수를 1번만 실행시키고자 할때는 의존성 배열을 빈 배열로 둔다.