React Native 심화

React Native 심화 📚

1. 네비게이션

Stack Navigation

// 기본 스택 네비게이션 설정
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
        />
        <Stack.Screen
          name="Details"
          component={DetailsScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Tab Navigation

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

2. API 연동

Fetch 사용하기

function DataFetching() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(error => console.error(error));
  }, []);

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  );
}

Axios 사용하기

import axios from 'axios';

function DataFetching() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        console.error(error);
      }
    }
    fetchData();
  }, []);
}

3. 로컬 데이터 저장

AsyncStorage

import AsyncStorage from '@react-native-async-storage/async-storage';

// 데이터 저장
const storeData = async value => {
  try {
    await AsyncStorage.setItem('my-key', JSON.stringify(value));
  } catch (e) {
    console.error(e);
  }
};

// 데이터 불러오기
const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('my-key');
    return value != null ? JSON.parse(value) : null;
  } catch (e) {
    console.error(e);
  }
};

4. 푸시 알림

Expo Notifications

import * as Notifications from 'expo-notifications';

// 알림 권한 요청
async function registerForPushNotifications() {
  const { status } = await Notifications.requestPermissionsAsync();
  if (status !== 'granted') {
    alert('알림 권한이 필요합니다!');
    return;
  }

  const token = (await Notifications.getExpoPushTokenAsync()).data;
  return token;
}

// 로컬 알림 보내기
async function scheduleNotification() {
  await Notifications.scheduleNotificationAsync({
    content: {
      title: '알림 제목',
      body: '알림 내용입니다.',
    },
    trigger: { seconds: 2 },
  });
}

5. 성능 최적화

React.memo 사용

const MyComponent = React.memo(function MyComponent(props) {
  return (
    <View>
      <Text>{props.text}</Text>
    </View>
  );
});

useCallback 활용

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

  const handlePress = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <ChildComponent onPress={handlePress} />;
}

6. 앱 배포

Android 배포 준비

1. 앱 서명 키 생성
2. build.gradle 설정
3. 릴리즈 빌드 생성

iOS 배포 준비

1. Apple Developer 계정 설정
2. 인증서 및 프로비저닝 프로파일 설정
3. Xcode에서 빌드 및 아카이브

7. 테스트

Jest 사용하기

import renderer from 'react-test-renderer';

test('컴포넌트 렌더링 테스트', () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  expect(tree).toMatchSnapshot();
});

8. 애니메이션

Animated 사용

import { Animated } from 'react-native';

function FadeInView() {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <Animated.View style={{ opacity: fadeAnim }}>
      <Text>페이드인 효과</Text>
    </Animated.View>
  );
}

9. 상태 관리

Recoil 사용

import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';

// 아톰 생성
const counterState = atom({
  key: 'counterState',
  default: 0,
});

// 셀렉터 생성
const doubledCounterState = selector({
  key: 'doubledCounterState',
  get: ({ get }) => {
    const count = get(counterState);
    return count * 2;
  },
});

function Counter() {
  const [count, setCount] = useRecoilState(counterState);
  const doubledCount = useRecoilValue(doubledCounterState);

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

function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  );
}