[React Native] 플랫폼별 코드 작성

크로스 플랫폼 앱을 만들 때, 가능한 많은 코드를 재사용하고 싶을 것입니다. 하지만 특정 상황에서는 코드를 다르게 구현하는 것이 합리적일 수 있습니다. 예를 들어 Android와 iOS에서 각각 다른 시각적 컴포넌트를 구현하고 싶을 때가 있습니다. react native는 코드를 플랫폼별로 분리하고 구성하는 두 가지 방법을 제공합니다. Platform 모듈 사용플랫폼별 파일 확장자 사용특정 컴포넌트는 한 플랫폼에서만 작동하는 속성을 가질 수 있습니다. 이러한 속성은 @platform으로 주석이 달려 있으며, 웹사이트에서 작은 배지로 표시됩니다.Platform 모듈react native는 앱이 실행 중인 플랫폼을 감지하는 모듈을 제공합니다. 이 감지 로직을 사용하여 플랫폼별 코드를 구현할 수 있습니다. 이..

• format_list_bulleted React Native
• · 2024. 6. 24.
• textsms

[React Native] 문제 해결하기(Troubleshooting)

포트가 이미 사용중일 때Metro 번들러는 포트 8081에서 실행됩니다. 다른 프로세스가 이미 해당 포트를 사용 중인 경우, 해당 프로세스를 종료하거나 번들러가 사용하는 포트를 변경할 수 있습니다.포트 8081에서 프로세스 종료하기포트 8081를 사용 중인 프로세스의 ID를 찾으려면 다음 명령어를 실행합니다.sudo lsof -i :8081그런 다음, 다음 명령어를 실행하여 프로세스를 종료합니다.kill -9 Windows에서는 Resource monitor를 사용하여 포트 8081를 사용하는 프로세스를 찾고 Task Manager를 사용하여 이를 중지할 수 있습니다.8081이 아닌 다른 포트 사용하기번들러가 다른 포트를 사용하도록 설정하려면 프로젝트의 루트에서 다음 명령어를 실행합니다.npm start..

• format_list_bulleted React Native
• · 2024. 6. 24.
• textsms

[React Native] 리스트 표시하기(FlatList, SectionList) 사용법

react natvie는 데이터를 리스트 형태로 표시하기 위한 여러 컴포넌트를 제공합니다. 일반적으로 FlatList 또는 SectionList를 사용하게 됩니다.FlatList 컴포넌트는 유사한 구조의 데이터가 변동하는 스크롤 목록을 표시합니다. FlastList는 항목의 수가 시간에 따라 변할 수 있는 긴 목록의 데이터를 처리하는 데 적합합니다. 일반적인 ScrollView와 달리 FlatList는 화면에 현재 표시되는 요소들만 렌더링하며, 한 번에 모든 요소를 렌더링하지 않습니다. FlastList 컴포넌트는 두 가지 props가 필요합니다. data와 renderItem입니다. data는 리스트의 정보 소스입니다. renderItem은 소스에서 하나의 항목을 가져와 렌더링할 포맷된 컴포넌트를 반환..

• format_list_bulleted React Native
• · 2024. 6. 24.
• textsms

[React Native] ScrollView 사용하기

ScrollView는 여러 컴포넌트와 뷰를 포함할 수 있는 일반적인 스크롤 컨테이너입니다. 스크롤 가능한 항목은 이질적일 수 있으며, horizontal 속성을 설정하여 세로와 가로로 모두 스크롤할 수 있습니다. 이 예제는 세로 ScrollView를 생성합니다.import React from "react";import { ScrollView, Text, Image, View } from "react-native";const logo = { uri: 'https://reactnative.dev/img/tiny_logo.png', width: 64, height: 64,}const ScrollLogo = () => { return ( ..

• format_list_bulleted React Native
• · 2024. 6. 24.
• textsms

[React Native] 텍스트 입력 처리하기(Text Input) 사용법

TextInput은 사용자가 텍스트를 입력할 수 있게 해주는 Core Component입니다. 이 컴포넌트는 텍스트가 변경될때마다 호출되는 함수를 받는 onChangeText prop과 텍스트가 제출될때 호출되는 함수를 받는 onSubmitEditing prop을 가지고 있습니다.예를 들어 사용자가 입력할 때 그들의 단어를 다른 언어로 변역한다고 가정해 보겠습니다. 이 새로운 언어에서는 모든 단어가 동일하지 🍕로 쓰입니다. 따라서 Hello there Bob이라는 문자을 🍕 🍕 🍕로 번역됩니다.import React, {useState} from "react";import { Text, TextInput, View } from "react-native";const PizzaTranslator = ..

• format_list_bulleted React Native
• · 2024. 6. 24.
• textsms

[React Native] 리액트 기본 사항

react native는 javascript로 사용자 인터페이스를 구축하는 인기 있는 오픈 소스 라이브러리인 react에서 실행됩니다. react native를 최대한 활용하려면 react 자체를 이해해야 됩니다.react의 핵심 개념을 설명하겠습니다.컴포넌트JSXpropsstate컴포넌트고양이를 사용하여 Cat 컴포넌틀 정의해 보겠습니다.우선 react와 react-native의 text core component를 javscript의 import를 사용하여 가져옵니다.import React from 'react'import {Text} from 'react-native'컴포넌트는 함수로 시작합니다.const Cat = () => {}컴포넌트를 청사진으로 생각할 수 있습니다. 함수 컴포넌트가 반환하는 ..

• format_list_bulleted React Native
• · 2024. 6. 24.
• textsms