React Hooks (useEffect)

1.useEffect

 

useEffect란?

 

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

에를 들어 어떤 컴포넌트가 화면에 보여졌을 때 무언가를 실행하고 싶다면?

혹은 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? 이떄 useEffect를 사용한다.

 

++useEffect도 useState와 마찬가지로 훅이기 때문에 import해서 사용한다.

 

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 사용으로 인해

hello useEffect라는 문구가 콘솔에 찍히게 된다.

 

useEffect와 리렌더링

 

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;

이 코드에서 useEffect를 사용한 부분을 제외하고는 익숙할 것이다.

지난번에 실습했던 예제에서 useEffect만 추가한 것이고, input에 text를 넣었을때

바뀐값이 실시간으로 console.log에 찍혔었다.

 

여기서 useEffect가 들어가면 어떻게 될까?

input에 글자하나 찍힐때마다 console.log가 찍힌다.

 

이유는 다음과 같다.

1.input에 값을 입력한다.

2.value, 즉 state가 변경된다.

3.state가 변경되었기 때문에, App 컴포넌트가 리렌더링 된다.

4.리렌더링이 되었기 때문에 useEffect가 다시 실행된다.

5.1번->5번 과정이 계속 순환된다.

 

이를 의존성 배열을 통해 해결할 필요가 있다.

 

 

2.의존성 배열

 

의존성 배열이란?

 

의존성 배열이란 이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행한다 라는 것이다.

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

 

의존성 배열이 빈 배열일 경우

 

의존성 배열에 들어있는 값이 바뀔 때만 useEffect를 실행한다고 했다.

따라서 의존성 배열이 빈 배열일 경우, 아무것도 넣지 않았으니 useEffect는 처음에

딱 한번만 실행되고 그 이후로는 어떤일이 일어나도 실행되지 않는다.

 

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

 

의존성 배열에 값이 있는 경우

 

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

 

value state를 의존성 배열에 넣었고 

value state는 input의 초기값으로 설정되어 있으니,

의존성 배열을 쓰지 않았을 때와 마찬가지로 글자 하나 바뀔때마다 console.log에

hello useEffect가 찍힐 것이다.

 

3.clean up

 

클린 업이란?

 

컴포넌트가 나타났을 때 effect 함수가 실행되는 것은 배웠고 

컴포넌트가 사라졌을 때 무언가를 어떻게 실행하는지 배울 차례이다.

이를 클린업 이라고 한다.

 

클린업 사용

 

// src/App.js

import React, { useEffect } from "react";

const App = () => {

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

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

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

export default App;

 

클린업을 하는 방법은 useEffect 안에서 return을 해주고 이 부분에 실행되길 

원하는 함수를 넣으면 된다.

 

<이동> 버튼을 누르면 /~~ 로 이동하는 버튼이 있다고 가정해보자. (useNavigate를 사용해서)

버튼을 누르면 본래 페이지에 있던 <이동>버튼이 들어있는 컴포넌트가 사라지고 /~~로 이동하게

될 것이다. 이때 이동한 /~~ 페이지에서는 클린업에 따라 return안에 들어있는 값이 출력될 것이다.

 

4. 정리

• useEffect는 화면에 컴포넌트가 mount 또는 unmount 됐을 때 실행하고자 하는 함수를 제어하게 해주는 훅이다.
• 의존성 배열을 통해 함수의 실행 조건을 제어할 수 있다.
• useEffect 에서 함수를 1번만 실행시키고자 할때는 의존성 배열을 빈 배열로 둔다.
• 클린업은 컴포넌트가 사라졌을 때 useEffect의 return 안에 값이 실행되는 것을 말한다.