Per ardua ad astra.

.jsx 파일 사용 하는 방법들어가며리액트 네이티브(React Native) 프로젝트에서 .jsx 파일을 사용하는 방법을 간단하게 정리해본다.일반적으로 리액트 네이티브에서는 .js 파일만 인식하며, .jsx 파일을 사용하려고 할 경우 에러가 발생한다. 방법현재 리액트 네이티브 프로젝트의 expo-cli 버전에 따라 방법 ① 또는 방법 ②의 방법을 따라한다. 방법 ① : metro.config.js 파일에 확장자 추가하기프로젝트 최상단 경로(/)의 메트로 설정 파일(metro.config.js)에 다음과 같이 코드를 추가한다.만약 해당 파일이 없을 경우 새로 생성해준다. /metro.config.jsmodule.exports = { resolver: { sourceExts: [..

StatusBar (react-native, expo-status-bar)들어가며리액트 네이티브(React Native)의 StatusBar와 엑스포(Expo)의 expo-status-bar에  대해 간단히 정리해본다. StatusBar (React Native)개념상단 상태 표시줄(시간, 배터리, 신호 등)의 스타일, 배경색, 표시 여부 등을 제어할 수 있는 React Native 내장 컴포넌트 사용 방법import { StatusBar } from 'react-native';export default function App() { return ( );} 주요 속성속성설명플랫폼barStyle- 텍스트 색상 설정▶ default : 플랫폼별 기본 색상 (iOS ..

Platform API들어가며리액트 네이티브(React Native)의 Platform API에 대해 간단히 정리해 본다. Platform API개념리액트 네이티브에서 앱이 실행되고 있는 플랫폼(iOS, Android, Web 등)을 감지하고, 플랫폼별로 다른 동작이나 스타일을 구현할 수 있게 해주는 유틸리티 사용 방법불러오기import { Platform } from 'react-native'; ① Platform.OS현재 실행 중인 플랫폼을 문자열로 반환해 준다.android, ios, web, windows, macosconst platform = Platform.OS;if (platform === 'android') { console.log('Running on Android'..

ScrollView들어가며리액트 네이티브(React Native)의 ScrollView 컴포넌트에 대해 간단하게 정리해본다. ScrollView개념스크롤 가능한 컨테이너로, 자식 컴포넌트가 화면의 크기를 넘어설 때 스크롤(Scroll)을 통해 볼 수 있게 해주는 컴포넌트자식 요소들이 많거나 화면보다 커질 경우, 사용자가 스크롤해서 볼 수 있도록 만들어준다. 주요 속성속성타입설명horizontalbooleantrue로 설정 시, 가로 스크롤 가능 (기본 : 세로)contentContainerStylestyle내부 콘텐츠 전체에 적용할 스타일showsVerticalScrollIndicatorboolean세로 스크롤바 표시 여부showsHorizontalScrollIndicato..