[6주차] 리액트숙련: React Hooks - useEffect

React Hooks - useEffect

useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행

 

 

useEffect 언제 사용하나?

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

• 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고자 하면
• 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면

useEffect 를 사용하면 된다. 

 

 

useEffect 사용방법

1. import 하기

import React, { useEffect } from "react";

 

2.

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

 

 

useEffect 예시

입력창에 글자를 입력할때마다 개발자 도구에서 콘솔의 내용이 찍힌다.

input에 값을 입력
-> value, 즉 state가 변경
-> state가 변경 되었기 때문에 App 컴포넌트가 리랜더링
-> 리랜더링으로 useEffect 발동 

import './App.css';
import {useEffect} from 'react';
import {useState} from 'react';

function App() {

  const [value, setValue] = useState('');
  useEffect(()=> {
    console.log("hellow useeffect");
  })

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

  );
}

export default App;

 

 

 

useEffect의 의존성 배열 ( dependency Array )

useEffect에는 의존성 배열이라는 것이 있다.

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

 

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

 

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

예시

현재 의존성 배열에 값이 없는 빈 배열인 상태이다.

의존성 배열은 배열에 (1)값을 넣고, (2)그 값이 바뀔 때만 useEffect를 실행하는 것이기 때문에

처음 로딩이 될 때만 딱 한번 실행되고 그 이후로는 실행되지 않는다.

 

알수 있는 점: 

어떤 함수가 컴포넌트가 렌더링 될 때 단 한번만 실행하고 싶으면 의존성 배열을 [] 빈 상태로 넣으면 된다

// src/App.js

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;

 

 

 

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

예시

입력할때마다 입력하는 값을 콘솔로그에 값과 함께 나타나게 하기 <- 배열에 value를 넣어주면 됨

import './App.css';
import {useEffect} from 'react';
import {useState} from 'react';

function App() {

  const [value, setValue] = useState('');
  useEffect(()=> {
    console.log(`hellow useeffect your input is ${value}`);
  },[value]);

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

  );
}

export default App;

 

 

 

useEffect의 clean up

컴포넌트가 사라졌을 때 무언가를 어떻게 실행하게 하는 것

 

clean up 사용방법

구현하려면 패키지 추가 설치가 필요하다.

// src/App.js

import React, { useEffect } from "react";

const App = () => {

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

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

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

export default App;

 

 

const nav = useNavigate();

다른페이지로 이동해서 컴포넌트가 사라지고, 그에 따라 클린없이 실행되는 과정에 필요

 

 

 

결론

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