React - useEffect()

Moolbum·2021년 11월 23일
0

React

목록 보기
4/23
post-thumbnail

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. 두 번째 인자에 [] 값을 넣으면 한 번만 실행된다.

  2. 아무 값도 넣지 않으면 함수가 다시 실행 될 때마다 실행된다.


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);
    };
  });

1️⃣ effect에서 함수를 반환하는 이유

모든 effect는 정리를 위한 함수를 반환할 수 있습니다. 이 점이 구독(subscription)의 추가와 제거를 위한 로직을 가까이 묶어둘 수 있게 합니다!

2️⃣ React가 effect를 정리(clean-up)하는 시점

React는 컴포넌트가 마운트 해제(언마운트)되는 때에 정리(clean-up)를 실행합니다.

3️⃣ clean-up 의존성배열

의존성배열이 [] 일때는 언마운트시 클린업 이펙트 발생
의존성배열이 [count] 일때는 새로운 이벤트가 발생하기 전에 발생


출처 : https://github.com/donavon/hook-flow

profile
Junior Front-End Developer 👨‍💻

0개의 댓글