React Native Hooks 완벽 가이드: useEffect, useState 활용법

React Native는 모바일 애플리케이션 개발을 위한 강력한 도구입니다. React와 마찬가지로 React Native도 여러 가지 Hook을 제공하며, 그중 가장 자주 사용되는 것이 useEffect와 useState입니다. 이 글에서는 이 두 가지 Hook에 대해 깊이 있게 살펴보고, 실제 코드를 통해 활용 방법을 설명합니다.

useState

React Hooks의 개념은 리액트 컴포넌트에서 상태와 사이드 이펙트를 더 쉽게 관리하기 위해 도입되었습니다. useState는 그 중에서도 가장 기본이 되는 Hook으로, 상태를 함수형 컴포넌트에 추가할 수 있게 해줍니다.

예제 코드

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

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

  return (
    <View>
      <Text>{`Count: ${count}`}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default CounterApp;

위 코드는 useState를 사용하여 카운터 앱을 구현한 예제입니다. useState는 상태 변수와 해당 변수를 갱신하는 함수를 반환합니다. 이 예제에서 상태 변수는 count이며, setCount 함수는 count 값을 갱신하는 데 사용됩니다.

useEffect

useEffect는 함수형 컴포넌트에서 사이드 이펙트를 처리할 때 사용하는 Hook입니다. 예를 들어, 데이터를 fetch하거나 DOM을 직접 조작해야 하는 경우를 들 수 있습니다. useEffect는 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount에 해당하는 기능을 제공합니다.

예제 코드

javascript
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));
  }, []);

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

export default DataFetchingComponent;

위 예제에서는 useEffect를 사용하여 컴포넌트가 마운트될 때 데이터를 fetch하도록 설정했습니다. 두 번째 인자로 빈 배열 []을 전달하면, 이 useEffect는 컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다.

Cleanup 함수

useEffect는 컴포넌트가 언마운트될 때나 다음 이펙트가 실행되기 전에 cleanup 함수도 실행할 수 있습니다. 이는 메모리 누수를 방지하기 위해 필요합니다.

javascript
useEffect(() => {
  const interval = setInterval(() => {
    console.log('This will run every second');
  }, 1000);

  return () => clearInterval(interval);
}, []);

이 예제에서는 setInterval을 사용하여 1초마다 로그를 출력하는 타이머를 설정하고, cleanup 함수에서 clearInterval을 호출하여 타이머를 해제합니다.

결론

React Native Hooks는 함수형 컴포넌트에서 상태와 사이드 이펙트를 관리하는 강력한 도구입니다. useState와 useEffect는 이러한 기능을 제공하는 대표적인 Hook들입니다. 이 글에서는 간단한 예제를 통해 이 두 가지 Hook의 사용법을 설명했습니다. 실제 프로젝트에서 이 Hook들을 어떻게 활용할 수 있는지 더 깊이 있는 이해를 위해 다양한 시도를 해보는 것이 좋습니다.