useEffect

내승현·2022년 4월 10일
0

useEffect가 하는 일은 무엇일까?

useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말합니다. React는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다) DOM 업데이트를 수행한 이후에 불러낼 것입니다. 위의 경우에는 effect를 통해 문서 타이틀을 지정하지만, 이 외에도 데이터를 가져오거나 다른 명령형(imperative) API를 불러내는 일도 할 수 있습니다.


함수형 컴포넌트의 생명주기 훅 useEffect

클래스형 컴포넌트에는 componentDidMout와 같은 생명주기 메서드들이 d있다..

그렇다면 함수형 컴포넌트에서의 생명주기관련 훅은 무엇일까요?

바로 useEffect 입니다.

componentDidMount

//** 의존성 배열**[]**에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝나게 됩니다.(1번만 실행)

useEffect(()=>{
		console.log("마운트 됨!!")
	},**[]**)

componentDidUpdate와 비슷

// 의존성 배열이 없기 때문에 뭐 하나라도 바뀌면 무조건 다시 실행됩니다.
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	})


// someState가 수정될때만 리렌더 해주기
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	},[someState])

componentWillUnmount

useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")

		//이부분이 끝나고 진행할 것들
		return()=>{
			console.log("여기서 나갈래요!!")
		}

	},[])

componentDidUpdate와 비슷하지만 다른점 하나는, Mount 되자마자 실행되는 점이다.

useEffect의 실행 시점
→생명주기 메서드,훅 은 기본적으로 렌더(화면그리기) 이후에 실행된다.
따라서 useEffect와 lifecycle 메서드는 렌더 이후에 실행된다.

💡useEffect 사용시 주의 사항

  • useEffect 안에서 setState의 사용
    →useEffecrt 내에서 setState를 사용할때는 정말 필요한 경우가 아니라면 지양하는게 가장 좋다.

컴포넌트가 마운트된 이후에 setState를 적용하게 되면,
1. state가 변경되고,
2. 변경된 state로 컴포넌트가 다시그려지게(=리렌더) 됩니다.

즉, useEffecrt 내에서 setState를 사용하게 되면 불필요한 리렌더나 무한루프를 일으키게 되고 성능면에서 비효율적이게 된다.


이용예시

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect를 컴포넌트 안에서 불러내는 이유는 무엇일까?

useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 count state 변수(또는 그 어떤 prop에도)에 접근할 수 있게 된다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있는 것이다. Hook은 자바스크립트의 클로저를 이용하여 React에 한정된 API를 고안하는 것보다 자바스크립트가 이미 가지고 있는 방법을 이용하여 문제를 해결한다.

profile
아토언니의 성장기 ,,

0개의 댓글