[React Native] Layout 다루기(View, margin, padding, ScrollView)

1. View React Native에서 는 박스(box)와 같은 개념이다.여러 컴포넌트를 그룹화하는 용도로 사용된다.화면의 레이아웃을 만들 때 기본적으로 사용되는 가장 중요한 컨테이너. Hello React Native! 2. margin과 padding☾ padding (박스 내부 여백) 박스 안쪽 공간을 의미한다.텍스트나 이미지가 박스 테두리와 겹치지 않게 한다. 안쪽 여백 적용 ☾ margin (박스 외부 여백)박스 바깥쪽 공간을 의미한다.다른 컴포넌트와의 간격을 만든다. 바깥 여백 적용 margin vs paddingpadding: 안쪽 여백 → 내용물과 경계 사이 거리margin: 바깥 여백 → 다른 박스와의 거리 React Native에서는 margin이 겹치지 않는다 (웹과..

• format_list_bulleted Front-end/React Native
• · 2025. 9. 8.
• textsms

[React Native] 텍스트, 이미지, 텍스트 입력창 삽입

1. 텍스트 삽입 app-folder > App.js react-native에서 Text를 임포트한다. 내부에 문자열을 입력하면 화면에 출력된다. fontSize : 텍스트 크기color: 텍스트 색상import { StyleSheet, View, Text } from 'react-native';export default function App() { return ( // 텍스트 삽입 Hello, World Hello, World );} 2. 이미지 삽입react-native에서 Image를 임포트한다.이미지는 파일에서 불러오기(require) 또는 웹 주소로 불러오기(uri) 두 가지 방법이 있다. require : 로컬 프로젝트 안의 이미지 파일을 가져..

• format_list_bulleted Front-end/React Native
• · 2025. 9. 8.
• textsms

[React Native] 개발 환경 세팅

1. node.js 설치아래 링크에서 node.js를 설치한다. https://nodejs.org/en/download/ Node.js — Download Node.js®Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org 잘 설치되었는지 확인하고 싶다면 커맨드 창에 가서 npm 명령어를 입력해보면 된다.문제 없이 설치되었다면 다음과 같은 화면이 나온다.>npm 2. App 생성 >npx create-expo-app 폴더이름 만약 빈 템플릿으로 만들고 싶다면..

• format_list_bulleted Front-end/React Native
• · 2025. 9. 8.
• textsms