Daily Log

View, Text, StyleSheet 컴포넌트 from react-native expo 라이브러리에 있는 expo/vector-icons, StatusBar, LinearGradient 날씨 정보를 Weather 컴포넌트에 넘겨주는 법 1. data.main.temp를 App.js 에서 Weather.js에 넘겨야한다. 2. 그러기 위해서는 상위 App.js에서 불러오는데이터를 state에 저장한다. 3. setState는 useState와 같은 역할을 한다. 회사에서는 hooks를 사용하니깐 class 형으로 개발하는 해당 프로젝트에서 몰랐던 부분임. setState는 어떤 일을 하나요? setState()는 컴포넌트의 state객체에 대한 업데이트 실행 getWeather class내부에서 아래와..

우선 React-Native를 쓰려면 기본적으로 React를 알아야한다. React-Native로 날씨앱 만들기 강의를 수강중인데, import되는 라이브러리중에 처음보는 라이브러리인 PropType이 있어 알아보았다. 목적 - 부모로부터 전달받은 컴포넌트의 props 타입 확인을 하기 위해 사용한다. - 자식 컴포넌트에 명시해놓은 데이터 타입과, 부모로부터 내려받은 타입이 일치하지 않으면 경고문이 뜬다. 사용법 npm이나 yarn으로 설치부터 한다. yarn add proptypes prop-types 라이브러리해서 import 하여 사용할 수 있다. import PropTypes from 'prop-types'; - PropTypes는 전달받은 데이터의 유효성을 검증하기 위해 사용된다. - prop에..

React-Native 컴포넌트 는 와 같음 flex: 사용하여 레이아웃짠다. -> 브라더끼리는 숫자로 경쟁하고, 숫자 큰 애가 더 큰 뷰를 차지함 RN Style 리액트 네이티브에만 있는 CSS가 있음. Style - RN의 대부분의 스타일은 웹 CSS 동작과 일치함 - 다만, id, class등의 선택자로 스타일 지정하는 것이 아님 - StyleSheet.create메소드를 이용해 스타일 object를 작성하여 컴포넌트에 style props를 전달함 기본문법 - CSS 문법은 key, value를 가지는 object 형태 기존의 CSS와 RN 스타일과의 차이점 id, class 등의 선택자 사용 안함 ; 사용 대신 , 사용 . 사용하지 않고 : 사용 .red {...} //기존 red:{...} /..

환경셋팅 설치/버전 확인(특정 버전 이상만 가능) node -v (10이상) npm -v (6이상) -> 노드 설치하면 기본적으로 설치됨 xcode -> simulator가 필요 app store나 구글 플레이스토어에서 exop client 다운 => 핸드폰에서 테스트해볼 수 있는 유일한 방법 expo 설치 npm install -g expo-cli 왜 expo를 사용해야할까? => expo를 절대 사용하지 말라는 개발자도 많음(ㅠㅠ) - 상용 앱 개발시 어차피 네이티브 코드에서 다 다시 설정해줘야 하는 경우가 많음 => 네이티브 파일 접근이 어려움(큰 기업에선 필요함) => 인스타그램, 우버 정도는 가능 Expo CLI => 네이티브 파일을 숨기고 모든걸 관리해줌. => 휴대폰에서 앱을 테스트해볼 수 ..