[React Native] 미니 게임 앱

TextInput 컴포넌트는 데이터를 입력할 수 있는 입력 필드 렌더링

 

리액트 네이티브가 가장 먼저 로딩하는 파일이 App.js 파일이기 때문에 App.js 파일에서 내보낸 컴포넌트가 주요 렌더링 컴포넌트가 된다

 

커스텀 버튼을 만들려면 리액트 네이티브의 핵심 컴포넌트를 결합하면 된다

실제 리액트 네이티브 팀이 버튼을 구축할 때도 소스 코드를 보면 결국 핵심 컴포넌트의 조합으로 만들었다

import { View, Text } from "react-native";

function PrimaryButton(children) {
  return (
    <View>
      <Text>{children}</Text>
    </View>
  );
}

export default PrimaryButton;

<PrimaryButton>Reset</PrimaryButton>
<PrimaryButton>Confirm</PrimaryButton>

 

그림자 넣기

Android : styles에 elevation 프로퍼티 추가

iOS : shadow로 시작하는 프로퍼티 이용 (shadowColor, shadowOffset, shadowOpacity, shadowRadius)

shadowOffset은 그림자를 만드는 객체로부터 왼쪽과 오른쪽으로 어느 정도 늘어지는지 정의하기 때문에 width와 height 프로퍼티 설정 필요

 

핵심 컴포넌트들이 플랫폼에 따라 다르게 네이티브 컴포넌트로 컴파일된다!!

 

TextInput에 maxLength 프로퍼티를 추가해 넣을 수 있는 최대 문자 수 설정 가능

문자열이 아닌 숫자로 지정

maxLength={2}

 

TextInput에서 기기에 뜨는 키보드 제어하려면 keyboardType 프로퍼티 사용

number-pad는 모든 플랫폼을 지원하는 숫자만 보이는 키보드

autoCapitalized 옵션을 none으로 하면 자동으로 대문자 입력되는 것 제한

autoCorrect 프로퍼티는 자동 수정을 켜고 끌 수 있다

 

Touchable 컴포넌트는 예전에 메인 컴포넌트로 요소에 터치 가능성 지원

요즘에는 Pressable 컴포넌트 권장!

onPress 프로퍼티를 가지는데 함수를 값으로 가져 onPress에 전달되는 함수가 버튼이 눌러졌을 때마다 실행

android_ripple을 추가해 안드로이드에 물결 효과가 나오는 반응 추가 가능

android_ripple에 객체를 전달하고 객체에 색깔만 설정하면 버튼 눌렀을 때 색깔 적용

android_ripple={{ color: "#640233" }}

 

커스텀 버튼을 구축할 때 흔히 나타나는 문제 중 하나인 물결 효과가 버튼 안쪽이 아닌 바깥쪽에 적용이 된다면

JSX 코드를 재구조화해야 한다

 

overflow:'hidden'을 스타일에 주면 컨테이너 내부에 일어나는 효과나 스타일링이 컨테이너를 넘어가는 부분은 잘라서 안 보이게 만든다

 

iOS에 시각적인 피드백을 추가하고 싶으면 iOS 전용 스타일을 설정해야 한다

opacity를 0.75로 설정하면 75% 불투명하다는 거니까 25% 투명하다는 뜻

 

Pressable 컴포넌트의 style 프로퍼티는 현재 전달하고 있는 스타일링 객체나 화살표 함수 같은 함수를 가지며 Pressable이 눌렸을 때 React Native에 의해 자동 호출되고 style 객체는 이벤트에 관한 데이터 즉 하나의 프로퍼티를 가진 객체를 받게 된다

<Pressable
  style={({ pressed }) =>
    pressed
      ? [styles.buttonInnerContainer, styles.pressed]
      : styles.buttonInnerContainer
  }

객체 재구조화를 사용해 그 프로퍼티를 차출 가능

pressed는 버튼 등의 요소를 누르면 true, 그렇지 않으면 false

style 프로퍼티를 사용하는 경우 style 객체를 전달할 수도 있고 style 객체 배열을 전달할 수도 있다

 

View는 콘텐츠가 들어갈 만큼의 공간만 차지

화면 전체에 배경색을 적용하고 싶다면 flex:1 설정해주면 View가 스타일을 전달받아 최대한의 공간을 차지한다

 

expo-linear-gradient 패키지 설치하면 선형 그라데이션을 적용 가능

expo install expo-linear-gradient

<LinearGradient colors={["#3b021f", "#ddb52f"]}>

 

ImageBackground 컴포넌트 활용하면 배경 이미지 추가 가능

전경이 아닌 배경에 이미지 렌더링

<ImageBackground
  source={require("./assets/images/background.png")}
  resizeMode="cover"
  style={styles.rootScreen}
  imageStyle={styles.backgroundImage}
>

resizeMode를 cover로 설정하면 이미지가 왜곡되지 않고 확대 및 축소를 통해 최대한의 공간을 덮는다

이미지도 부모 컴포넌트에 의해 사용 가능한 모든 공간을 차지해야 한다

imageStyle 프로퍼티에 스타일을 적용하면 ImageBackground에 활용하는 이미지에 스타일을 추가하는 것

 

Alert 컴포넌트로 경고창을 불러올 수 있다

Alert.alert()

alert 메서드의 첫번째 인수는 제목, 두 번쨰 인수는 메시지, 세 번쨰 인수는 경고창 버튼 설정 가능

버튼은 여러 개 추가 가능

Alert.alert(
    "Invalid number!",
    "Number has to be a number between 1 and 99.",
    [{ text: "Okay", style: "destructive", onPress: resetInputHandler }]
  );

 

SafeAreaView 컴포넌트는 기기의 모서리, 특히 상단 모서리에서 노치와의 간격을 설정할 때 유용하다

SafeAreaView에 스타일을 적용하면 사용 가능한 모든 공간에서 노치 영역이 자동으로 빠진다

 

React Native에서는 자주 사용하는 색상과 같은 특정 상숫값을 보여주는 헬퍼 파일을 만든다

일반적인 자바스크립트 객체

const Colors = {
  primary500: "#72063c",
  primary600:'#640233'
};

export default Colors;

여러 개의 컴포넌트에서 사용되는 색상을 하나의 전역 위치에서 관리하기 때문에 여러 곳에서 변경할 필요 없이 한 곳에서 변경하면 된다

 

bind 메서드를 사용해 함수 실행에 사용될 매개변수의 값을 사전에 구성할 수 있다

<PrimaryButton onPress={nextGuessHandler.bind(this, "lower")}>

 

계단식 스타일

function InstructionText({ children, style }) {
  return <Text style={[styles.instructionText, style]}>{children}</Text>;
}

style 프로퍼티에서 가져온 스타일을 컴포넌트 내부에 설정한 스타일과 합칠 수 있다

CSS의 계단식 배열 속성을 사용해 새로운 스타일을 기존 스타일과 병합해 기본값 스타일을 덮어쓸 수 있다

배열 순서에 따라 어떤게 덮어 쓸지 결정 가능

 

@expo/vector-icons에서 아이콘을 사용할 수 있다

import { Iconicons } from "@expo/vector-icons";

<Iconicons name="md-remove" size={24} color="white" />
<Iconicons name="md-add" size={24} color="white" />

 

커스텀 글꼴은 로딩 과정을 거쳐야 한다

보통 앱이 시작하자마자 빠르게 로딩되어야 하는데 컴포넌트 로딩에는 별도 패키지 활용

expo install expo-font

expo-font로부터 useFonts 훅 호출 가능

useFonts 실행하고 로딩할 글꼴에 대한 설정을 포함한 객체를 전달한다

 

로딩 화면을 위한 패키지 설치

expo install expo-app-loading

스플래시 화면을 연장하고 특정 조건을 충족하기 전까지 스플래시 화면이 나타나도록 한다

 

로딩 중인지 확인하기 위해 useFonts가 반환하는 배열 활용

첫 번째 요소는 글꼴의 로딩 여부

const [fontsLoaded] = useFonts({
  "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
  "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf"),
});

if (!fontsLoaded) {
  return <AppLoading />;
}

 

Text 컴포넌트는 또 다른 Text 컴포넌트를 감쌀 수 있다

<Text style={styles.summaryText}>
  Your phone needed <Text style={styles.highlight}>X</Text> rounds to
  guess the number <Text style={styles.highlight}>Y</Text>.
</Text>

텍스트가 포함된 View에는 fontSize를 추가해도 View에 중첩된 텍스트 요소에 영향을 미치지 않지만

텍스트 요소 안에 중첩된 텍스트 요소의 경우 부모 텍스트 컴포넌트에 설정한 텍스트 스타일의 영향을 받게 된다

 

콘텐츠가 화면 경계를 벗어나는 FlatList 스크롤 문제를 해결하려면 FlatList 주위에 컨테이너로 감싸면 된다

기본적으로 FlatList는 높이가 무한인 것처럼 작동하기 때문에 그 주변 컨테이너를 통해 높이를 제한하면 해당 컨테이너 내에서 스크롤이 가능하게 된다