[React Native] Hooks - useEffect

1. useEffect

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있도록 해준다.

쉽게 말해 컴포넌트가 보여졌을 때(마운트), 사라졌을 때(언마운트), 업데이트 될 때(props가 바뀔 때)를 캐치해 각 상황별로 작업을 처리할 수 있게 한다.

 

기본적으로 아래와 같은 형태를 가지고 있다.

useEffect(() => {
  // 마운트
  return () => {
    // 언마운트
  };
}, []);

위 코드에서 "마운트" 부분은 컴포넌트가 렌더링 될 때 호출 된다.

그리고 "언마운트" 부분은 컴포넌트가 화면에서 사라질 때 호출된다.

 

 

추가로 두번째 파라미터에 의존성 배열을 두어 해당 배열에 포함된 값들이 변경될 때마다 useEffect가 실행되도록 할 수 있다.

useEffect(() => {
  // 마운트
  return () => {
    // 언마운트
  };
}, [dependencies]);

 

 

2. 예시 코드

아래 코드는 스위치를 토글하면 스위치의 상태를 반영해서 화면에 "활성화", "비활성화"라는 텍스트로 변경해주는 예시이다.

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

const ToggleSwitch = () => {
  const [isEnabled, setIsEnabled] = useState(false);

  useEffect(() => {
    // 마운트될 때
    console.log("마운트");

    return () => {
      // 언마운트될 때
      console.log("언마운트");
    };
  }, [isEnabled]);

  return (
    <View>
      <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={() => setIsEnabled(previousState => !previousState)}
        value={isEnabled}
      />
      <Text>{isEnabled ? '활성화' : '비활성화'}</Text>
    </View>
  );
};

export default ToggleSwitch;