U

Memoization는 결과를 캐싱하여 함수의 성능을 최적화하는 데 사용되는 기술입니다. ReactNative에서 Memoization는 함수형 컴포넌트의 렌더링 프로세스를 최적화하기 위해 상위 주문 컴포넌트(HOC)라는 메모와 함께 사용되는 경우가 많습니다.

ReactNative의 함수형 컴포넌트는 일반적으로 클래스 컴포넌트보다 읽기 및 쓰기가 쉽지만 불필요한 재렌더링을 유발하여 성능 저하를 초래할 수 있습니다. Memoization는 함수의 결과를 캐싱하고 동일한 인수로 함수가 호출될 때 캐시된 값을 반환함으로써 이러한 불필요한 재렌더링을 방지할 수 있습니다.

ReactNative에서 Memoization를 사용하려면 React에서 제공하는 메모 HOC를 사용하면 됩니다. 이 HOC는 함수형 컴포넌트를 받아들이고 Memoization된 새로운 컴포넌트를 반환합니다. 메모 HOC는 렌더링 간에 컴포넌트의 프로퍼티를 비교하고 프로퍼티가 변경된 경우에만 컴포넌트를 다시 렌더링합니다.

예를 들어, 아이템 목록을 소품으로 받고 지도 함수를 사용하여 아이템 목록을 렌더링하는 함수형 컴포넌트가 있다고 가정해 보겠습니다.

function MyList(props) {
  return (
    <FlatList
      data={props.items}
      renderItem={({ item }) => <ListItem title={item.title} />}
      keyExtractor={item => item.id.toString()}
    />
  );
}

Memoization이 없으면 이 컴포넌트는 항목 소품이 변경되지 않더라도 상위 컴포넌트가 다시 렌더링할 때마다 다시 렌더링됩니다. Memoization를 통해 이 컴포넌트를 최적화하려면 메모 HOC로 래핑하면 됩니다

const MemoizedList = React.memo(MyList);

이제 Memoization된 목록 컴포넌트는 소품이 변경된 경우에만 다시 렌더링하므로 성능이 향상됩니다.

사용메모 훅을 사용하여 동일한 MyList 컴포넌트를 메모하는 방법은 다음과 같습니다.

function MemoizedList(props) {
  const memoizedList = useMemo(() => <MyList {...props} />, [props.items]);

  return memoizedList;
}

이 예제에서는 MemoizedList라는 새로운 컴포넌트를 생성했는데, 이 컴포넌트는 useMemo 훅을 사용해 MyList 컴포넌트를 Memoization합니다. 사용메모 훅은 Memoization된 값을 반환하는 함수와 종속성 배열이라는 두 가지 인수를 받습니다. 배열의 종속성 중 하나라도 변경된 경우, 사용메모 훅은 메모된 값을 다시 계산합니다. 이 경우 종속성으로 props.items을 전달했기 때문에 사용메모 훅은 항목 소품이 변경될 때마다 MyList의 Memoization된 값을 다시 계산합니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0

Hooks는 React 16.8에 도입된 강력한 기능으로, 클래스를 작성하지 않고도 state 및 기타 React 기능을 사용할 수 있게 해줍니다.

Hooks는 함수형 컴포넌트에서 state와 다른 React 기능을 사용할 수 있게 해주는 함수입니다. 다시 말해, Hooks는 컴포넌트 간에 상태 저장 로직을 재사용하는 방법입니다. Hooks는 여러 컴포넌트에서 공유할 수 있는 재사용 가능한 코드를 작성할 수 있는 방법을 제공합니다.

React Native에서 가장 일반적으로 사용되는 Hooks 중 하나는 useState Hooks입니다. 이 훅을 사용하면 함수형 컴포넌트에 상태를 추가할 수 있습니다. 다음은 예시입니다

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

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

  return (
    <>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)} title="Click me" />
    </>
  );
};

export default Counter;

이 예시에서는 React에서 useState 훅을 임포트하고, 이를 사용해 count라는 상태 변수와 state를 업데이트하는 데 사용할 수 있는 setCount라는 함수를 선언합니다. 그런 다음 이 변수를 사용해 현재 카운트를 표시하고 버튼이 클릭될 때 업데이트합니다.

React Native에서 일반적으로 사용되는 또 다른 훅은 useEffect 훅입니다. 이 훅을 사용하면 API에서 데이터를 가져오거나 이벤트에 가입하는 것과 같은 함수형 컴포넌트에서 부수적인 효과를 수행할 수 있습니다. 다음은 예시입니다

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

const Timer = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);

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

  return (
    <Text>{time} seconds have elapsed</Text>
  );
};

export default Timer;

이 예제에서는 React에서 useEffect 훅을 가져와서 매초마다 상태를 업데이트하는 타이머를 생성합니다. 또한 컴포넌트가 마운트 해제될 때 간격을 정리하기 위해 useEffect 훅을 사용합니다.

Hooks는 함수형 컴포넌트에서 state와 다른 React 기능을 사용할 수 있게 해주는 React의 강력한 기능입니다. Hooks를 사용하면 테스트와 유지보수가 더 쉬운 재사용 가능한 코드를 작성할 수 있습니다. React Native에서 일반적으로 사용되는 몇 가지 Hooks에는 useState, useEffect, useContext, useRef, useCallback, useMemo, useReducer가 있습니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0

아토믹 디자인(Atomic Design)은 사용자 인터페이스를 더 작고 재사용 가능한 구성 요소로 분해하여 만드는 방법론입니다. 이 방법론은 원자(Atoms), 분자, 유기체, 템플릿, 페이지의 다섯 가지 레벨로 구성됩니다. 각 레벨은 점점 더 복잡한 수준의 UI 계층 구조를 나타냅니다.

React Native에서는 계층 구조의 각 레벨을 나타내는 컴포넌트를 생성하여 아토믹 디자인(Atomic Design)을 적용할 수 있습니다. 다음은 React Native에서 아토믹 디자인(Atomic Design)을 적용하는 방법에 대한 개요입니다

1. 원자(Atoms): UI의 가장 작고 단순한 빌딩 블록입니다. React Native에서 원자(Atoms)에는 텍스트, 아이콘, 버튼, 입력 필드 등이 있습니다. 아톰은 재사용이 가능해야 하며 단일 책임이 있어야 합니다.

import { Text } from 'react-native';

const Heading = ({ children }) => {
  return <Text style={{ fontSize: 24, fontWeight: 'bold' }}>{children}</Text>;
};

export default Heading;

2. 분자: 분자는 더 복잡한 UI 요소를 형성하기 위해 함께 작동하는 원자(Atoms) 그룹입니다. React Native에서 분자의 예로는 양식 입력, 검색창, 아이콘이 있는 버튼 등이 있습니다.

import { View, TextInput, Button } from 'react-native';

const SearchBar = ({ value, onChangeText, onSearch }) => {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <TextInput
        style={{ flex: 1, height: 40, borderWidth: 1, borderColor: 'gray', marginRight: 8 }}
        value={value}
        onChangeText={onChangeText}
        placeholder="Search"
      />
      <Button title="Search" onPress={onSearch} />
    </View>
  );
};

export default SearchBar;

3. 유기체: 복잡한 UI 요소를 형성하기 위해 함께 작동하는 분자 그룹입니다. React Native에서 유기체의 예로는 헤더, 폼 또는 목록이 있습니다.

import { View } from 'react-native';
import Heading from './Heading';
import SearchBar from './SearchBar';

const Header = ({ title, searchValue, onSearchChange, onSearch }) => {
  return (
    <View style={{ backgroundColor: 'white', padding: 16 }}>
      <Heading>{title}</Heading>
      <SearchBar value={searchValue} onChangeText={onSearchChange} onSearch={onSearch} />
    </View>
  );
};

export default Header;

4. 템플릿: 템플릿은 페이지 또는 페이지 섹션의 구조를 정의하는 레이아웃입니다. 템플릿은 유기체, 분자, 원자(Atoms)로 구성될 수 있습니다.

import { View } from 'react-native';
import Header from './Header';
import List from './List';

const HomeScreenTemplate = ({ title, searchValue, onSearchChange, onSearch, data }) => {
  return (
    <View>
      <Header title={title} searchValue={searchValue} onSearchChange={onSearchChange} onSearch={onSearch} />
      <List data={data} />
    </View>
  );
};

export default HomeScreenTemplate;

5. 페이지: 방법론의 최종 결과물로, 애플리케이션의 전체 페이지를 나타냅니다.

import React, { useState } from 'react';
import HomeScreenTemplate from './HomeScreenTemplate';

const HomeScreen = () => {
  const [searchValue, setSearchValue] = useState('');
  const [data, setData] = useState([]);

  const handleSearchChange = (value) => {
    setSearchValue(value);
  };

  const handleSearch = () => {
    // Perform search operation and update data
  };

  return (
    <HomeScreenTemplate
      title="Home"
      searchValue={searchValue}
      onSearchChange={handleSearchChange}
      onSearch={handleSearch}
            data={data}
        />
    );
};

export default HomeScreen;

이 예제에서는 가장 작은 빌딩 블록부터 시작했습니다. 그런 다음 여러 원자(Atoms)를 결합하여 SearchBar 분자를 만들었습니다. 그런 다음 SearchBar와 Heading을 결합하여 Header 유기체를 만들었습니다. 마지막으로 Header를 List 유기체와 결합하여 HomeScreenTemplate 템플릿을 만들었습니다.

아토믹 디자인(Atomic Design)을 사용하면 다양한 방식으로 결합하여 복잡한 사용자 인터페이스를 만들 수 있는 재사용 가능한 컴포넌트를 만들 수 있습니다. 이 접근 방식을 사용하면 코드를 보다 모듈화하고 유지 관리가 쉬우며 확장성을 높일 수 있습니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0

react-navigation 라이브러리는 React Native에서 널리 사용되는 라우팅 및 탐색 라이브러리입니다. 앱에서 화면 간 탐색을 처리하는 간단하고 사용하기 쉬운 방법을 제공합니다.

react-navigation 라이브러리에는 세 가지 유형의 내비게이터가 있습니다: 스택 내비게이터, 탭 내비게이터, 드로어 내비게이터입니다. 스택 내비게이터는 스택 기반 접근 방식을 사용하여 화면 사이를 탐색하는 데 사용되며, 탭 내비게이터는 탭 기반 탐색 시스템을 제공합니다. 드로어 내베기에터를 사용하면 슬라이딩 서랍 메뉴를 만들 수 있습니다.

앱에서 react-navigation 라이브러리를 사용하려면 먼저 npm을 사용하여 설치해야 합니다.

npm install @react-navigation/native

그런 다음 사용하려는 특정 내비게이터에 대한 종속성을 설치할 수 있습니다. 예를 들어 스택 내비게이터를 사용하려면 다음을 설치할 수 있습니다

npm install @react-navigation/stack

필요한 패키지를 설치한 후에는 앱에 필요한 구성 요소를 가져올 수 있습니다

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

NavigationContainer 컴포넌트는 react-navigation 라이브러리의 최상위 컴포넌트이며, 이 컴포넌트로 앱을 감싸줘야 합니다. createStackNavigator 함수를 사용하면 스택 내비게이터를 생성할 수 있습니다.

다음은 앱에서 스택 내비게이터를 사용하는 방법에 대한 예시입니다

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

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

이 예제에서는 두 개의 화면으로 구성된 스택 내비게이터를 만듭니다. 홈 화면과 디테일 화면입니다. NavigationContainer 컴포넌트는 Stack.Navigator 컴포넌트를 감싸고, 각 화면은 Stack.Screen 컴포넌트를 사용하여 정의됩니다.

react-navigation 라이브러리는 헤더를 커스터마이징하고, 탐색 이벤트를 처리하고, 화면 간에 매개변수를 전달하는 옵션도 제공합니다. 이러한 기능에 대한 자세한 내용은 공식 문서를 참조하세요.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0

React Native에서 Expo를 사용할 때 Expo에서 제공하는 SplashScreen 컴포넌트를 사용하여 매력적이고 흥미로운 앱의 스플래시 화면을 만들 수 있습니다.

SplashScreen 컴포넌트를 사용하려면 expo-splash-screen 라이브러리에서 컴포넌트를 임포트하고 preventAutoHide 함수를 호출하여 일정 시간이 지나면 스플래시 화면이 사라지게끔 기본 동작을 변경할 수 있습니다. 다음은 예제입니다

import React, { useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import { SplashScreen } from 'expo-splash-screen';

export default function App() {
  useEffect(() => {
    SplashScreen.preventAutoHide();
  }, []);

  return (
    <View style={styles.container}>
      {/* Your app content */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

새로 나온 expo-router 라이브러리에서도 다음과 같이 SplashScreen 컴포넌트를 제공합니다.

import FontAwesome from '@expo/vector-icons/FontAwesome';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { SplashScreen, Stack } from 'expo-router';
import { useEffect } from 'react';
import { useColorScheme } from 'react-native';

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router';

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: '(tabs)',
};

export default function RootLayout() {
  const [loaded, error] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
    ...FontAwesome.font,
  });

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  return (
    <>
      {/* Keep the splash screen open until the assets have loaded. In the future, we should just support async font loading with a native version of font-display. */}
      {!loaded && <SplashScreen />}
      {loaded && <RootLayoutNav />}
    </>
  );
}
...

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0