[React Native] flex를 활용하여 레이아웃 배치와 정렬하기

컴포넌트는 flexbox를 사용하여 자식 요소들의 레이아웃을 지정할 수 있습니다. flexbox는 다양한 화면 크기에서 일관된 레이아웃을 제공하기 위해 설계되었습니다.일반적으로 flexDirection, alignItems 및 justifyContent를 조합하여 적절한 레이아웃을 배치할 수 있습니다.주의사항react native에서 flexbox는 웹의 CSS와 비슷하게 동작하지만 몇 가지 차이가 있습니다. 기본값이 다르며, flexDirection은 기본적으로 row가 아닌 column으로 설정되고, alignContent는 stretch가 아닌 flex-start로 기본 설정됩니다. flexShrink의 기본값은 1이 아닌 0이며, flex 매개변수는 단일 숫자만 지원합니다.flexflex는 요소가..

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

[React Native] 컴포넌트 높이와 너비(fixed, flex, percent)

고정된 크기컴포넌트의 크기를 설정하는 일반적인 방법은 style에 고정된 너비와 높이를 추가하는 것입니다. react natvie에서 모든 크기는 단위가 없으며, 밀도 독립적인 픽셀을 나타냅니다.import React from 'react';import {View} from 'react-native';const FixedDimensionsBasics = () => { return ( );};export default FixedDimensionsBasics;이 방법으로 크기를 설정하는 것은 화면 크기에 따라 계산되는 것이 아니라 항상 특정한 포인트로 고정해야 하는 컴포넌트에 일반적입니다.플렉스 크기컴포넌트의 style에 flex를 사용하여 동적으로 사용 가..

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

[React Native] Style props로 사용하기

react native에서는 javascript를 사용하여 애플리케이션의 스타일을 지정합니다. 모든 핵심 컴포넌트는 style이라는 prop을 받습니다. 스타일 이름과 값은 일반적으로 웹에서 css가 작동하는 방식과 유사하지만, 이름은 카멜 케이스로 작성됩니다. 예를 들어, background-color 대신에 backgroundColor와 같이 작성됩니다.style prop은 일반적으로 javascript 객체일 수 있습니다. 이것이 보통 예제 코드에서 사용하는 방식입니다. 또한 스타일의 배열을 전달할 수도 있습니다. 배열에서 마지막 스타일이 우선적으로 적용되므로, 이를 사용하여 스타일을 상속할 수 있습니다.컴포넌트가 복잡해짐에 따라 여러 스타일을 한 곳에서 정의하는 것이 일반적으로 더 깔끔합니다. 이..

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

[React Native] 버전 업그레이드하기

react native에서 버전을 업그레이드하면 더 많은 API, 뷰, 개발 도구 및 다른 많은 기능들에 접근할 수 있습니다.Expo 프로젝트Expo 프로젝트를 react native의 새 버전으로 업그레이드하려면 package.json 파일에서 react-native, react, expo 패키지 버전을 업데이트해야 합니다. expo는 sdk 버전을 점진적으로 한 번에 하나씩 업그레이드하는 것을 권장합니다. 이렇게 하면 업그레이드 프로세스 중에 발생하는 문제점을 식별하고 해결할 수 있습니다.react natvie 프로젝트전형적인 react native 프로젝트는 사실상 android 프로젝트, ios 프로젝트 및 javascript 프로젝트로 구성되어 있기 때문에 업그레이드는 다소 까다롭습니다. Upg..

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

[React Native] Typescript 사용하기

typescript는 javascript에 타입 정의를 추가하여 확장한 언어입니다. 새로운 react native 프로젝트는 기본적으로 typescript를 타겟으로 하지만, javascript와 flow도 지원합니다.Typescript 시작하기react native CLI나 Ignite와 같은 인기 있는 템플릿으로 생성된 새 프로젝트는 기본적으로 Typescript를 사용합니다.Typescript는 Expo에서도 사용할 수 있습니다. Expo는 typescript 템플릿을 유지 관리하며, 프로젝트에 .ts 또는 .tsx 파일이 추가될 때 자동으로 typescript를 설치하고 구성하도록 안내합니다.npx create-expo-app --template기존 프로젝트에 Typescript 추가하기npm i..

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

[React Native] 라이브러리 사용하기

react native는 앱에서 사용할 수 있는 내장된 코어 컴포넌트와 API 세트를 제공합니다. react native에 번들로 포함된 컴포넌트와 API에만 국한되지 않습니다. 수 천명의 개발자로 구성된 커뮤니티가 존재하며, 필요한 기능이 코어 컴포넌트와 API에 없는 경우 커뮤니티에서 제공하는 라이브러리를 찾아 설치할 수 있습니다.패키지 관리자 선택react native 라이브러리는 일반적으로 npm 레지스트리에서 node.js 패키지 관리자를 사용하여 설치합니다.node.js가 컴퓨터에 설치되어 있다면 npm cli도 이미 설치되어 있을 것입니다. 일부 개발자는 약간 더 빠른 설치 시간과 workspaces와 같은 추가 고급 기능을 제공하는 yarn을 선호합니다. 두 도구 모두 react nativ..

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