[React] #06 useEffect ??

김준경·2023년 5월 31일
0

React

목록 보기
5/5
post-thumbnail

useEffect

useEffect란 ?

  useEffect는 리액트에서 사이드 이펙트 (Side Effect) 를 처리하기 위해 사용되는 리액트 훅 (Hook) 이다. 사이드 이펙트는 컴포넌트 외부와 상호작용하는 작업을 의미한다.

생명 주기 ?

  리액트 컴포넌트에는 생명 주기 (LifeCycle) 가 있다. 생명 주기 또는 라이프사이클(Life cycle)이라고도 많이 표현한다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다.

Mount ?

  마운드(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미한다.

Update ?

  업데이트(Update)는 컴포넌트가 업데이트 되는 것을 의미하며, props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때 등이 있다.

UnMount ?

  언마운트(UnMount)는 컴포넌트가 DOM에서 사라질 때를 의미한다.

기본형

useEffect는 두 개의 인자를 받는다. 첫 번째 인자는 사이드 이펙트를 정의한 함수이고, 두 번째 인자는 의존성 배열(Dependency Array)이다. 의존성 배열은 선택적으로 사용할 수 있으며, 배열에 포함된 값들이 변경될 때만 부수 효과 함수가 실행되도록 제어할 수 있다....는데.....

이게 무슨 말이냐면, 아래 코드를 보자,

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

function App() {
  
  const [num, setNum] = useState(0);
  
  useEffect(() => {
    console.log('useEffect 실행!');
  }, [num]);

  return (
    <button onClick={()=>{setNum(num++)}}>눌러라.</button>
  );
}

  위 코드를 보면, useEffect 가 실행될 때 마다, 콘솔에 useEffect 실행! 이라는 문자열이 뜨는 코드이다. 또한 의존성 배열 안에 useState변수 num이 들어가 있다.

  자, 그러면 이게 과연 어떻게 돌아갈까???

  일단 useEffect는 컴포넌트가 렌더링 되면 한번 실행된다. 따라서 버튼을 누르지 않아도, 일단 콘솔에는 useEffect 실행! 이 한번 출력될 것이다.

  이제 의존성 배열에 대해 살펴볼 차례이다. 아까 위에서 useEffect 는 의존성 배열에 들어가 있는 값이 변경되면 내부코드를 실행한다 했다. 우리가 버튼을 누르면, useState 변수 num 을 1더해준다. 의존성 배열내부의 값이 변경되었기 때문에, 콘솔에 useEffect 실행! 이 찍히게 된다.

profile
프론트엔드개발자가될래요

0개의 댓글