[React Native] React Hook useEffect 완벽 정리

React Hook 중 가장 많이 사용되고 또 중요한 기능인 useEffect에 대해서 알아볼게요

useEffect는 사이드 이펙트(side effects)를 수행하기 위한 훅으로, 데이터 가져오기, 구독 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 작업 등을 수행할 때 유용합니다.

기본 사용법부터 알아볼게요

React Hook useEffect

useEffect 기본 사용법

useEffect(() => {
    // Side effects를 수행하세요.
    
    return () => {
        // cleanup 로직이 필요한 경우 여기에 작성합니다.
    };
}, [/* 의존성 배열 */]);

 

Side Effect 부분에 useEffect 동작 시 실행할 로직을 추가합니다. 

그리고 의존성 배열의 존재 유무 그리고 어떤 값이 들어가있는지에 따라 useEffect가 언제 동작하는지 결정됩니다.

 

useEffect에서 Side Effect란?

"side effect"는 함수형 프로그래밍에서 주로 나오는 용어입니다. 

외부 세계와의 상호작용이나 가변 데이터의 변경 등을 포함하는 코드를 의미해요

함수나 메서드가 side effect를 가지면, 해당 함수나 메서드는 외부의 상태에 의존하거나 외부의 상태를 변경할 수 있습니다.

Side Effect는 예시는 여러개 있는데 그 중 몇개를 알아볼게요!

1. 데이터베이스의 변경: 데이터베이스에 데이터를 추가, 수정, 삭제하는 동작은 모두 side effect입니다

2. 전역 변수나 클래스의 멤버 변수 변경: 함수나 메서드가 전역 변수나 클래스의 멤버 변수의 값을 변경하면 side effect를 가지게 됩니다.

3. API 호출: API를 호출하여 데이터를 가져오거나 데이터를 보내는 작업도 side effect에 해당합니다.

4. 콘솔 로깅: 콘솔에 로그를 출력하는 것도 사실은 side effect입니다. 왜냐하면 외부 환경인 콘솔에 메시지를 출력하는 동작이기 때문입니다.

API 호출하는 로직에 대해서 간단히 예제 코드를 살펴볼게요

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const DataFetchingComponent = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error fetching data:', error));
    }, []); // 빈 배열은 컴포넌트가 마운트될 때만 effect를 실행하도록 합니다.

    return (
        <View>
            {data ? <Text>{data}</Text> : <Text>Loading...</Text>}
        </View>
    );
};

의존성 배열에 빈 배열이 들어가있습니다.

이 경우 컴포넌트가 마운트 될 때, 즉 화면이 처음 로딩 될때 한번 실행됩니다.

의존성 배열에 대해서는 밑에서 조금 더 자세하게 다룰게요

코드를 분석해보면 DataFecthingComponent가 처음 마운트될 때 useEffect Hook이 동작하고

이때 api를 호출해서 return 받은 값을  useState를 통해 data에 저장하네요. 

useState에 대한 소개는 제가 정리해놓은 글이 있으니 참조해주세요!

[React Native] React Hook useState 완벽 정리

 

이렇게 useEffect를 통해 API 호출 로직을 생성할 수 있습니다. 

의존설 배열이란?

useEffect의 동작 방식은 두 번째 인자로 전달되는 의존성 배열에 크게 의존합니다.

의존성 배열이 없는 경우

useEffect에 의존성 배열이 제공되지 않으면 컴포넌트가 리렌더링될 때마다 side effect 코드가 실행됩니다.

useEffect(() => {
    console.log('Component was re-rendered');
});

 

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

외존성 배열에 아무 값도 없으면, useEffect 내의 코드는 컴포넌트가 처음 마운트될 때만 실행되며, 업데이트 될때는 실행되지 않습니다. 

즉 최초 1번만 실행됩니다. 

useEffect(() => {
    console.log('Component was mounted');
}, []);

 

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

의존성 배열에 특정 값을 포함시키면, 그 값이 변경될 때마다 side effect 코드가 실행됩니다. 

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

useEffect(() => {
    console.log(`Count value changed to ${count}`);
}, [count]);

즉 count 값이 변경될 때마다 로그가 출력될거에요.

useEffect를 이해하고 올바르게 사용하면 React 및 React Native에서 컴포넌트의 라이프사이클과 관련된 side effect를 효과적으로 관리할 수 있어요. 

그리고 의존성 배열을 사용하여 side effect의 실행 시점을 세밀하게 제어하는 능력은 앱의 성능 최적화와 버그 예방에 큰 도움이 됩니다!