본문 바로가기

JavaScript/React-Native3

[React-Native] 컴포넌트 스타일링 💡 인라인(inline) 스타일링 컴포넌트의 태그에 직접 스타일을 적용하는 방식이다. // src/App.js import React from "react"; import { View, Text } from "react-native"; const App = () => { return ( Inline Styling - Text Inline Styling - Error ); }; export default App; 💡 클래스 스타일링 컴포넌트 스타일에 StyleSheet 에 정의된 스타일을 적용하는 방식이다. import React from "react"; import { StyleSheet, View, Text } from "react-native"; const App = () => { return ( I.. 2021. 11. 4.

[React-Native] React Native 에서 컴포넌트란 💡 컴포넌트란? 재사용할 수 있는 조립 블록으로, 화면에 나타나는 UI 요소이다. 그러나 단순히 UI 역할만 하는 것이 아닌 부모로부터 받은 속성이나 자신의 상태에 따라 표현이 달라지고 다양한 기능을 수행합니다. 💡 JSX JSX 는 마치 HTML 을 작성한 것 같은 코드이다. 이러한 JSX 는 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 리액트 프로젝트에서 사용된다. export default function App() { return ( Open up App.js to start working on your app! ); } 여러 개의 요소를 표현할 경우 하나의 부모로 감싸야 한다. 위의 경우 Text 와 StatusBar 태그를 View 태그로 감싸고 있다. V.. 2021. 11. 3.

[React-Native] React Native 시작하기 💡 리액트 네이티브 환경 설정하기 1. node.js 설치하기 2. 파이썬 2.x.x 버전 설치하기 3. JDK 설치하기 4. 안드로이드 스튜디오 설치하기 파이썬을 설치하는 이유는 리액트 네이티브가 빌드할 때 파이썬이 필요하기 때문이다. node.js 와 JDK (16 버전) , 안드로이드 스튜디오는 이미 설치되어 있었기 때문에 추가적으로 설치하지는 않았다. JDK 환경 변수 설정하기 안드로이드 스튜디오 환경 변수 설정하기 안드로이드 스튜디오 설정 1. 안드로이드 스튜디오 실행 -> More Actions -> SDK Manager 클릭 2. SDK Platforms 에서 Show Package Details 클릭 -> Android 10.0 버전의 SDK Platform, Intel Atom_64 Sy.. 2021. 11. 2.

이전 1 다음

티스토리툴바