반응형 JSX6 리액트 네이티브 React Native | React.createElement와 JSX ⭕ 리액트 네이티브 React Native | React.createElement와 JSX 리액트 네이티브에서는 UI를 작성하기 위해 컴포넌트를 사용합니다. 텍스트를 표시하기 위해서는 Text 컴포넌트를 사용합니다. 이 때, React.createElement와 JSX는 컴포넌트를 생성하는 두 가지 주요 방법입니다. ➡️ React.createElement 함수 React.createElement 함수는 가상 DOM 객체를 생성하는 데 사용됩니다. 이 함수는 세 개의 인자를 받습니다. 첫 번째 인자: 컴포넌트의 이름 (예: 'Text') 두 번째 인자: 속성 객체 (props) 세 번째 인자: 컴포넌트의 자식 요소 예를 들어, 다음 코드는 Text 컴포넌트를 생성합니다. const virtualDOM =.. 2024. 3. 20. 리액트 네이티브 React Native | JSX와 XML 마크업 언어 ⭕ 리액트 네이티브 React Native | JSX와 XML 마크업 언어 리액트 네이티브(React Native)는 모바일 애플리케이션을 개발하기 위한 프레임워크로, XML 마크업 언어를 사용합니다. XML은 HTML의 부분집합으로, 태그나 속성을 자유롭게 확장할 수 있어 HTML보다 유연한 구조를 가집니다. ➡️ JSX JSX는 리액트 네이티브에서 사용되는 문법으로, JavaScript XML의 약자입니다. JSX는 JavaScript로 XML 형식의 코드를 작성할 수 있게 해줍니다. HTML과 달리 XML은 태그 이름을 자유롭게 정의할 수 있습니다 ➡️ 마크업 언어 문법 마크업 언어의 기본 문법은 시작 태그와 끝 태그로 이루어집니다. 시작 태그는 형식으로 작성하고, 속성을 가질 수 있습니다. 속성은.. 2024. 3. 20. 리액트 네이티브 React Native | 크로스 플랫폼(Cross Platform) ⭕ 리액트 네이티브 React Native | 크로스 플랫폼(Cross Platform) 리액트 네이티브(React Native)는 페이스북에 의해 2015년에 발표된 혁신적인 크로스플랫폼 모바일 앱 개발 프레임워크입니다. 이 기술은 모바일 앱 개발의 패러다임을 전환시키며, 개발자들에게 안드로이드와 iOS 운영체제를 위한 앱을 단일 코드베이스로 개발할 수 있는 능력을 부여합니다. 리액트 네이티브의 등장으로 인해, 웹 개발자들은 별도의 네이티브 언어 학습 없이도 효율적으로 모바일 앱을 개발할 수 있게 되었습니다. ➡️ 네이티브 앱 (Native App) 네이티브 앱 개발은 각 운영체제별로 최적화된 성능과 사용자 경험을 제공하지만, 이는 개별 플랫폼마다 별도의 앱 개발을 필요로 합니다. 안드로이드 앱 개발에.. 2024. 3. 19. 리액트 React | 조건부 렌더링(Conditional Rendering) ✅ 조건부 렌더링(Conditional Rendering) React에서는 상태(State)에 따라 컴포넌트를 조건부로 렌더링 할 수 있습니다. 이를 통해 애플리케이션의 상황에 맞게 필요한 컴포넌트만 보여주거나 숨길 수 있습니다. 조건부 렌더링은 JavaScript의 조건 처리와 유사하게 동작합니다. 조건부 연산자나 if 문을 사용하여 현재 상태에 따라 UI를 업데이트할 수 있습니다. 💡 사용자 로그인 상태에 따른 조건부 렌더링 사용자의 로그인 상태에 따라 다른 인사말을 보여주는 컴포넌트입니다. 다음은 로그인된 사용자에게는 "Welcome back!"을, 로그인되지 않은 사용자에게는 "Please sign up."을 보여주는 두 개의 컴포넌트입니다. function UserGreeting(props) {.. 2023. 7. 6. 리액트 React | 노마스 코더 영화 평점 웹서비스 | 로딩 현상 구현 ✅ Movie 컴포넌트 구성하기 💡 App 컴포넌트 작성 import React from 'react'; // App 컴포넌트 정의 class App extends React.Component { // render 메소드 정의 render() { return ( {/* 컴포넌트 내용을 추가 */} ); } } // App 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냄 export default App; 💡 isLoding state React 애플리케이션에서 데이터를 불러오거나 처리한다. 로딩 중일 때 사용자에게 로딩 중임을 알리기 위해 UI를 업데이트하는 데 사용한다. isLoading 변수는 true 또는 false 값으로 설정한다. import React from 'react'; // App 컴.. 2023. 4. 4. 리액트 React | JSX와 Babel: JavaScript의 확장된 문법과 변환 도구 ✅ JSX, JavaScript XML JSX는 리액트에서 사용되는 자바스크립트의 확장 문법입니다. 이를 통해 XML과 유사한 형태로 UI를 작성할 수 있습니다. JSX는 리액트 컴포넌트 파일에서 UI를 표현하는 데 주로 사용됩니다. JSX는 XML과 비슷한 구문으로 UI 구성 요소를 작성하며, 자바스크립트 코드 내에서 시각적으로 UI를 표현하는 데 도움을 줍니다. 개발자들은 주로 JSX를 활용하여 UI를 작성하고 유지보수하는 것을 선호합니다. .JSX 코드를 브라우저에서 직접 실행할 수는 없기 때문에, Babel과 같은 도구를 사용하여 JSX 코드를 일반 자바스크립트로 변환해야 합니다. 💡 JSX를 이용한 방법 JSX를 이용하면 HTML과 비슷한 형태로 코드를 작성할 수 있습니다. JSX 코드는 실제로.. 2023. 3. 25. 이전 1 다음 반응형
