리액트네이티브 (10) 썸네일형 리스트형 React Native 기본 컴포넌트 - 01. View View는 React Native에서 화면을 구성하는 데 있어서 가장 기본이 되는 컴포넌트이자 앱의 UI를 구성하는 중요한 요소 중 하나입니다. 쉽게 이야기를 하면 화면 안에 하나 공간을 만드는 역할을 하며 웹의 div와 같은 역할을 하고있습니다. 컴포넌트들을 감싼 View의 경우 따로 크기를 지정하지 않는다면 안의 자식요소들에 따라서 width와 height가 유동적으로 정해집니다. 예를 들어 각각의 view에 색상을 넣어서 코드를 확인해보면 안의 Text의 크기만큼만 View의 크기도 결정된다는 것을 알 수 있습니다. export default function App() { return ( 나는 1번! 나는 2번! ); } const styles = StyleSheet.create({ containe.. React Native Component 기본 정리 리액트 네이티브의 Component란 쉽게 이야기 하면 화면을 구성하는 객체입니다. 아래의 코드를 같이 볼까요? return ( Open up App.js to start working on your app! ); 이 코드는 리액트 네이티브 프로젝트를 생성하면 만들어지는 기본 코드입니다. 이 경우에는 view, text, statusbar로 총 3가지 종류의 컴포넌트로 구성되어있습니다. 그래서 실행하면 아래와 같이 나옵니다. 컴포넌트는 기본적으로 맨 윗줄에 사용할 컴포넌트를 선언해줍니다. 만약에 이 화면에 버튼을 추가하고 싶다면 아래와 같이 리액트 네이티브의 내장 컴포넌트인 Button을 사용하면 됩니다. import { StatusBar } from 'expo-status-bar'; import { S.. React Native Expo Visual Studio 확장 tool 추천 Visual Studio을 사용해서 React Native Expo를 개발할 때 유용한 확장툴을 추천해드리려고 합니다. (필수는 아니니까 귀찮으시면 생략하셔도 좋습니다만 일부는 Expo 앱 개발만이 아니라 다른 개발에서도 유용하기 때문에 설치를 권장합니다.) 1. Korean Language Pack for Visual Studio Code 이름에서부터 알 수 있듯이 한국어팩입니다. VS 기본 설정은 영어로 되어있는데 한국어로 사용할 수 있게 해줍니다. 2. PowerShell powershell과 관련된 추가적인 기능을 제공합니다. 보통 터미널을 추가하면 파워쉘이 기본으로 열리는데 이에 대한 다양한 인터페이스를 제공해주고 디버깅이나 코드 선택 실행과 같은 부가적인 기능을 추가해줘서 설치하면 편합니다. .. React Native Expo 기본 구조 Expo cli를 이용해서 react native 프로젝트를 생성했을 때 기본 구조를 알려드리겠습니다. 먼저 expo 프로젝트를 vs로 실행했을 때 모습입니다.(완전 입문자의 기준으로 설명드릴게요.) 먼저 좌측의 탐색기에는 해당 프로젝트의 파일들이 보입니다. 중요한 것만 하나씩 살펴볼까요? App.js는 앱을 실행했을 때 제일 처음 보여지는 메인 화면이 실행되는 파일입니다. ① 해당 js에서 사용할 모듈을 선언하는 겁니다. 이걸 보면 해당 js에서 StatusBar, StyleSheet, Text, View컴포넌트들을 사용한다는 것을 알 수 있습니다. 사용자가 지정한 외부 파일도 이곳에서 import 시킬 수 있습니다. ② export default로 선언된 함수입니다. 해당 파일을 불러오면 기본적으로 .. React Native Expo publish로 외부에서 사용할 테스트 QR코드 페이지 만들기 Expo publish React Native Expo 프로젝트는 QR 코드를 생성해서 프로젝트를 실행시켜볼 수 있는 Expo publish라는 기능이 있습니다. 만약에 외부 업체 사람들에게 보여줄 필요가 있다면 테스트용으로 보여줄 때 좋겠죠? :) 먼저 Expo의 publish란 무엇인지 알아보겠습니다.(공식문서 : https://docs.expo.dev/archive/classic-updates/publishing/) 설명을 하자면 exp.direct는 터널링으로 사용하는 도메인이라서 같은 LAN에 있지 않은 다른 사용자와 공동 작업 중인 프로젝트를 전송할 수 있고 액세스할 수 있다고 합니다. 다만 컴퓨터에서 번들러 및 개발 서버가 실행되고 있으므로 노트북을 끄거나 Expo CLI를 중지하면 해당 U.. React Naive Expo Some dependencies are incompatible with the installed expo version 가끔 Expo 프로젝트를 실행하다보면 이런 에러가 발생합니다. 이럴 때는 react-naitve 버전을 업데이트 해주면 됩니다. 친절하게 명령어도 있으니까 실행해주세요. //사진처럼 맨 뒤에 설치하라는 버전이 있는데 expo에서 알려주는 자신에게 맞는 버전을 설치해주세요. npx expo install react-native@버전 설치하고나서 다시 프로젝트를 다시 실행하면 메세지 없이 잘 실행됩니다! React Native Expo 프로젝트 실행방법 Expo 프로젝트를 실행하기 위해서는 다양한 방법이 있습니다. 상세하게 하나씩 알아보도록 하겠습니다. -에뮬레이터를 이용하는 방법 -핸드폰을 이용하는 방법 -외부 모바일 앱플레이어를 이용하는 방법 -웹으로 실행하는 방법 다양한 방법이 있지만 기본적으로 Expo 프로젝트를 실행하기 위해서는 로그인이 필요하므로 먼저 Expo 회원가입부터 해줍니다.(만약에 이미 계정이 있다면 이 부분은 생략해주세요.) Expo 사이트에 가서 회원가입을 눌러서 생성해줍니다.(https://expo.dev/) VS를 실행해서 터미널에서 expo 로그인을 해줍니다. expo login -u 아이디 -p 비밀번호 터미널에서 Expo 로그인이 완료되었다는 전제 하에 아래를 진행하도록 하겠습니다. 1. 안드로이드 에뮬레이터를 이용하는 .. React Native Expo 웹에서 디버깅 방법 react native expo 프로젝트 실행 방법 중에서 웹으로 실행할 경우 디버깅은 앱보다 훨씬 쉽습니다. 제일 먼저 웹에서 사용할 경우 브라우저에서 디버깅 확장프로그램을 설치합니다.(저는 엣지나 크롬을 추천드립니다.) 그 다음에 웹으로 프로젝트를 실행합니다. ctrl+shift+I로 개발자모드를 킵니다. 상단에 보면 보라색 아이콘 2개로 디버깅 메뉴가 추가된 것이 보입니다. 애뮬레이터나 핸드폰의 Expo 앱을 통해서 디버깅 하는 방법은 아래를 참고 2023.05.08 - [리액트네이티브] - React Native Expo 앱에서 디버깅 방법 React Native Expo 앱에서 디버깅 방법 리액트 네이티브 ExpoGo 앱을 사용한다는 전제로 디버깅 하는 방법입니다. 먼저 터미널에서 디버깅 툴을 설치해줍니다.(https://www.npmjs.com/package/react-devtools) //전역 설치 npm install -g react-devtools //종속성 설치 npm install --dev react-devtools 터미널에서 npm start로 프로젝트를 실행해줍니다. npm start 새로운 터미널을 하나 더 추가로 열어서 디버깅 툴 명령어를 실행합니다.(기존에 열었던 터미널은 서버 기동용으로 사용해야하기 때문에 꼭 새로운 터미널을 추가해주세요.) react-devtools ExpoGo 앱을 통해서 프로젝트를 클릭하면 자동으로 디버킹 툴이 활성화됩니다. 참조 : Expo 문.. React Native Expo 개발 환경설정 react native로 프로젝트를 만들려면 expo-cli, react native cli 2가지 방법이 있습니다. - expo는 결과물을 내기 쉽고 개발을 하기 쉽다는 장점이 있지만, 제공해주는 라이브러리가 한정적이라는 단점이 있습니다. - react native cli는 타언어를 추가로 사용하는 등 개발의 자유도가 높지만 처음 개발환경 구축이 까다롭다는 단점이 있습니다. 그렇기 때문에 저처럼 입문자 분의 경우 expo를 먼저 경험해보시는 걸 추천합니다. 저는 window 기준으로 개발 환경설정을 해보겠습니다. ※ 가급적이면 vs나 node.js 전부 설치 시 기본으로 지정된 경로에 설치해주세요! 그래야 에러가 발생해도 검색했을 때 수정하기 쉬워요. 1. Visual Studio Code 설치(htt.. 이전 1 다음
