elevne's Study Note

바로 Weather API 를 활용한 날씨확인 데모 앱을 제작해보기로 하였다. 우선 날씨 정보를 받아와서 보여줄 틀이 될 Component 부터 아래와 같이 작성해주었다. const Forecast = ({main, description, temp}) => { return ( {main} Current Conditions: {description} {temp} C ) } const styles = StyleSheet.create({ container: {height: 130, backgroundColor: "#000000"}, bigText: { flex:2, fontSize:20, textAlign:"center", margin:10, color:"#FFFFFF" }, mainText: { flex:1..

React Native 개발 환경을 설정할 때, Create React Native App 방식을 사용하여 매우 빠르고 쉽게 진행할 수 있다. 다른 방법으로는 react-native init 명령어를 이용하여, React Native 와 그 Dependency 까지 전부 설치하여 사용할 수도 있다. 우선 이번에는 Create React Native App 방식을 사용하여 개발환경을 구축하였다. npm install -g create-react-native-app 위 명령어를 통해 create-react-native-app 을 install 해준 후, 원하는 위치로 cd 한 이후 아래 명령어로 프로젝트를 생성한다. create-react-native-app rn-first-project 위 파일들 중 Ap..

React Native는 iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 JS 프레임워크이다. 프론트엔드 개발에 사용되는 React 에 기반을 두어 만들어졌으며, 현재 페이스북, 에어비앤비, 월마트, 바이두 등 여러 큰 회사들이 React Native 를 실무에서 사용하고 있다고 한다. React Native 의 렌더링 갱신 주기는 React 와 같다고 한다. props 나 state 가 변경될 때 React Native 또한 다시 뷰를 렌더링하는 것이다. 여기서 React Native 와 React 의 차이점은, React Native 는 HTML 과 CSS 마크업이 아닌 대상 플랫폼의 UI 라이브러리를 이용해 렌더링한다는 점이다. 그렇다면 어떻게 React Native (Javascrip..