6) React-Native 스타일링

스타일링리액트 네이티브에서는 자바스크립트를 이용해 스타일링할 수 있다.컴포넌트에는 style 속성이 있고 이 속성에 인라인 스타일을 적용하는 방법과 스타일시트에 정의된 스타일 사용하는 방법이 있다.1. 인라인 스타일링인라인 스타일은 HTML의 인라인 스타일링처럼 컴포넌트에 직접 스타일을 입력하는 방식이다.HTML은 문자열 형태로 스타일을 입력하지만, 리액트 네이티브에서는 객체 형태로 전달해야 한다는 차이점이 있다.src/App.jsconst App = () => { return ( Inline Styling - Text Inline Styling - Error );};인라인 스타일링은 어떤 스타일이 적용되는지 잘 보인다..

• format_list_bulleted React-Native
• · 2024. 10. 24.
• textsms

5) React-Native 이벤트

1. press 이벤트버튼을 만들 때 사용하는 TouchableOpactiy 컴포넌트에서 설정할 수 있는 Press 이벤트의 종류는 총 4가지이다.onPressIn: 터치가 시작될 때 항상 호출onPressOut: 터치가 해제될 때 항상 호출onPress: 터치가 해제될 때 onPressOut 이후 호출onLongPress: 터치가 일정 시간 이상 지속되면 호출src/components/EvenetButton.jsimport React from "react";import { TouchableOpacity, Text } from "react-native";const EventButton = () => { const _onPressIn = () => console.log("Press In !!!\\n");..

• format_list_bulleted React-Native
• · 2024. 10. 23.
• textsms

4) React-Native Props와 State

props와 state는 컴포넌트가 UI뿐만 아니라 다양한 기능을 담당할 수 있도록 하여 더욱 다양한 역할을 수행할 수 있도록 해준다.1. propsprops란 properties를 줄인 표현으로, 부모 컴포넌트로부터 전달된 속성값 혹은 상속받은 속성값을 말한다.부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자식 컴포넌트에서는 해당 props를 사용할 수 있지만 변경하는 것은 불가능하다.props의 변경이 필요할 경우 props를 설정 및 전달한 부모 컴포넌트에서 변경해야 한다. props 전달하고 사용하기먼저 부모 컴포넌트에서 props를 자식 컴포넌트로 전달하는 방법에 대해 알아보자!앞에서 Button 컴포넌트를 사용하면서 Button 컴포넌트의 title 속성을 지정했다.이 코드처럼 Butt..

• format_list_bulleted React-Native
• · 2024. 10. 23.
• textsms

3) React-Native 컴포넌트

컴포넌트란 재사용이 가능한 조립 블록으로 화면에 나타나는 UI요소이다.지금까지 봤던 App.js 파일도 App이라는 컴포넌트이다.컴포넌트는 단순히 UI 역할만 하는 것이 아니라 부모로부터 받은 props이나 자신의 state에 따라 표현이 달라지고 다양한 기능을 수행한다.즉 컴포넌트는 데이터와 UI 요소의 집합체라고 할 수 있다.1. 내장 컴포넌트Button 컴포넌트를 사용하고 title과 onPress 속성을 지정해 보자.title 속성은 버튼 내부에 출력되는 텍스트이며, onPress 속성에는 버튼이 눌렸을 때 호출되는 함수를 지정할 수 있다.src폴더를 생성하고 App 컴포넌트를 작성할 App.js파일을 생성한다.src/App.jsimport React from "react";import { Vie..

• format_list_bulleted React-Native
• · 2024. 10. 23.
• textsms

2) React-Native JSX

컴포넌트는 재사용할 수 있는 조립 블록으로 화면에 나타나는 UI요소라고 생각하면 이해하기 편함 먼저 프로젝트를 생성하게되면 아래와 같은 코드가 생성 됨import React from 'react';import {View, StyleSheet, Text} from 'react-native';const App = () => { return ( Open up App.js to start working on your app! );};const styles = StyleSheet.create({ container: { flex:1 , justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff..

• format_list_bulleted React-Native
• · 2024. 10. 23.
• textsms

1) 리액트 네이티브란

※ npx expo init [프로젝트 명]※ npx expo start --tunnel리액트 네이티브의 장점과 단점리액트 네이티브가 출시되면서 Objective-C 또는 Java를 사용하여 개발하지 않아도 웹 개발자가 익숙한 기술을 이하여 모바일 개발을 할 수 있게 됨특히 리액트에 익숙한 개발자라면 조금 더 수월하게 RN을 익힐 수 있음장점작성된 코드 대두분 플랫폼 간 공유가 가능해서 iOS, 안드로이드를 동시에 개발할 수 있다모바일 개발에 대한 지식이 없어도 자바스크립트만 알고 있으면 시작 가능작성된 구성 요소들이 재사용 가능함패스트 리프레쉬 기능을 제공함변경된 코드를 저장하면 자동으로 변경된 내용이 적용된 화면을 확인 가능기존에 수정 → 새로고침, 수정 → 컴파일 → 새로고침이라는 번거로운 작업을 ..

• format_list_bulleted React-Native
• · 2024. 10. 23.
• textsms