React - useEffect()

Moolbum·2021년 11월 23일

React Side Effect clean up effect hook render useEffect 마운트

React

목록 보기

4/23

Mounted (마운트)

마운트란 컴포넌트를 리턴해서 UI가 그려진것

컴포넌트가 리렌더링 되는 조건 : state 값이 변할 때, 전달받은 props값이 변할 때

Side Effect() 😎

어떤 함수가 input / output이외의 다른 값을 조작한다면, 이 함수는
Side Effect가 있다고 표현합니다!
함수컴포넌트에서는 외부세계에 영향을 주는 어떠한 행위입니다.

대표적으로 Data Fetching, DOM에 직접 접근(ex. Event Listener 등록), 구독(ex. setInterval)과 같은 행위들이 있습니다. 이들은 모두 컴포넌트에서 꼭 필요한 대표적인 Side Effect 들입니다.

useEffect() 😎

사용방법 : react 최상단에 훅을 추가해줘야합니다.

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

useEffect( ,[] ) : 코드가 한 번만 실행 되도록 보호해주는 함수
첫번째 인자에는 실행시키고 싶은 함수를 대입합니다!
두번째 인자에는 이곳의 키워드가 변할때 마다 실행!
* 두번째 인자 값이 들어있을 때 최초 한 번은 실행된다! 그 이후로는 인자의 조건에 따라서 실행!

ex)
useEffect( ()=> {} 실행시키고 싶은 함수 , [변하는조건] )
addEventListener( '변하는 조건' , 실행시키고 싶은함수 )

두 번째 인자에 [] 값을 넣으면 한 번만 실행된다.
아무 값도 넣지 않으면 함수가 다시 실행 될 때마다 실행된다.

1️⃣ useEffect를 사용하는 이유

함수컴포넌트 state값과, props에게 전달받은 값이 변할때마다 리렌더링된다.
그렇기 때문에 sideEffect 도 같이 리렌더링되기 때문에 의존성배열을 통해 원하는 조건에 sideEffect를 발생시키기 위해서 useEffect를 사용한다.

2️⃣ useEffect를 컴포넌트 안에서 불러내는 이유

useEffect를 컴포넌트 내부에 있으므로 effect를 통해 count state, prop에 접근할 수 있게 됩니다.

3️⃣ useEffect가 실행되는 시점

useEffect는 함수가 렌더링을 다 하고나서 실행됩니다.

Clean up Effect 😎

Render → Effect Callback → Clean Up!
이전에 일으킨 Side Effect를 정리할 필요가 있을 때 사용합니다.

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });