[RN] react-native UseEffect (()=> {},[]); 사용법

반응형

🐰: react-native를 사용하면서 정말 많이 사용한게 UseEffect 인거 같다.
그래서 개념부터 꼼꼼히 알아두는게 좋을거 같다😎

 

---

 

UseEffect 란?

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

 

1. useEffect 기본 사용법

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

 

Side Effect 부분에 useEffect 동작 시 실행할 로직을 추가한다.
그리고 의존성 배열 의 존재 유무 그리고 어떤 값이 들어가있는지에 따라 useEffect가 언제 동작하는지 결정된다.

 

2. useEffect Side Effect란?

함수형 프로그래밍에서 주로 나오는 용어이다. 외부 세계와의 상호작용이나 가변 데이터의 변경 등을 포함하는 코드를 의미한다.
따라서 함수나 메서드가 side effect를 가지면, 해당 함수나 메서드는 외부의 상태에 의존 하거나 외부의 상태를 변경할 수 있게된다.

 
사용예시)

• 데이터베이스의 변경: 데이터베이스에 데이터를 추가, 수정, 삭제하는 동작은 모두 side effect이다.
• 전역 변수, 클래스의 멤버 변수 변경: 함수나 메서드가 전역 변수나 클래스의 멤버 변수의 값을 변경하면 side effect를 가지게 된다.
• API 호출: API를 호출하여 데이터를 가져오거나 데이터를 보내는 작업.
• 콘솔 로깅: 외부 환경인 콘솔에 메세지를 출력하는 동작이기 때문에 해당한다.

 

(예제코드) - 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>
    );
};

1. 의존성 배열이 비어 있으므로 컴포넌트가 최초로 마운트 될때 한번 실행
2. DataFecthingComponent가 처음 마운트될 때 useEffect Hook이 동작
3. api를 호출해서 return 받은 값을  useState를 통해 data에 저장

 

3. useEffect 의존성배열란?

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

 

• 의존성 배열이 없는 경우 : 컴포넌트가 리렌더링 될때마다 side effect 코드가 실행

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

 

• 의존성 배열이 빈 배열인 경우 : 컴포넌트가 최초 마운트시 1회 실행

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

 

• 의존성 배열이 배열에 값이 있는 경우 : 배열안의 값이 변경될 때마다 side effect 코드 실행

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

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