728x90 jsx4 [React Native] 리액트 네이티브 배열과 JSX구문 배열에 여러 개의 JSX문을 담을 수 있습니다. App.tsx import React from 'react' import {SafeAreaView, Text} from 'react-native' export default function App(){ const children = [ test_1 , test_2 , test_3 ] return {children} } {children} 을 보면 배열 변수에 담긴 JSX문은 반드시 부모 컴포넌트의 자식 컴포넌트 형태로 만들어야 합니다. 배열 JSX문을 만들 때 조심할 점 JSX문에서 여러개의 자식 컴포넌트가 있을 때는 반드시 XML작성 원칙을 준수해야 합니다. XML 문법에서 부모 요소 없이는 여러 개의 XML 요소를 만들 수 없습니다. JSX 역시 XML.. 2021. 9. 29. [React Native] 리액트 네이티브 React.createElement와 JSX 구문과의 관계 아래 예제에서 Text를 리액트와 리액트 네이티브에서는 컴포넌트(Component)라 합니다. App.tsx import React from 'react' import {Text} from 'react-native' export default function App(){ const textElement = React.createElement(Text, null, 'Hello World') return text Element } React.createElement는 컴포넌트를 가상 DOM 객체로 만듭니다. 컴포넌트는 여러개의 속성(propeaty)과 하나 이상의 자식 컴포넌트를 가질 수 있습니다. 따라서 컴포넌트에는 속성과 자식 컴포넌트가 올 수 있으므로 React.createElement는 다음 형태로 .. 2021. 9. 24. [React Native] 리액트 네이티브 JSX JSX = JavaScript + XML JSX는 'JavaScript XML'의 줄임말로, XML에 자바 스크립트를 결합할 용도로 만든 구문입니다. React.createElement 호출 코드를 좀 더 단순하고 간결하게 만들 수 있고, 이를 자바스크립트를 확장하는 방식으로 구현합니다. '자바스크립트를 확장한다'라는 의미는 표준 ESNext 자바 스크립트나 타입스크립트 문법에는 JSX 구문이 없다는 뜻입니다. 리액트 네이티브 프레임워크 개발사인 페이스북은 마치 JSX 구문이 표준 자바스크립트 문법에 포함된 것처럼 동작하도록 설계했습니다. 그리고 이런 설계를 할 수 있었던 이유는 ESNext 자바스크립트 컴파일러인 바벨(babel)이 플러스인 구조로 동작하기 때문입니다. 바벨은 ESNext 자바스크립트 .. 2021. 9. 23. [ReactNative] 리액트 네이티브 컴포넌트 만들기 (뷰 작업, JSX 사용, 네이티브 컴포넌트 스타일링) 모든 리액트의 코드는 리액트 컴포넌트 안에 존재합니다. 리액트 네이티브 컴포넌트는 일반적인 리액트 컴포넌트와 대부분 비슷하지만 렌더링과 스타일 적용 방법에서 큰 차이가 있습니다. 뷰 작업하기 리액트를 이용해서 웹 페이지를 만들 떄는 일반적인 HTML요소 (, , 등)를 사용하여 렌더링 합니다. 리액트 네이티브는 이러한 요소 대신에 플랫폼에 종속적인 리액트 컴포넌트를 사용합니다. 리액트 리액트 네이티브 , , 자식 아이템 가장 기본적인 컴포넌트는 크로스 플랫폼 인데, 단순하고 유연한 UI 요소로 와 유사합니다. 컴포넌트는 iOS에서는 UIView로 렌터링되고 안드로이드에서는 VIEW로 렌더링 됩니다. 다른 컴포넌트들은 특정 플랫폼에서만 동작합니다. 예를 들어 는 iOS의 표준 날짜 선택기를 렌더링합니다. .. 2021. 8. 30. 이전 1 다음 728x90
