🤍 목표 기능 등록 : 할 일 추가 수정 : 완료되지 않은 할 일 항목 수정 삭제 : 할 일 삭제 완료 : 할 일 항목의 완료 상태 관리 기능 🤍 프로젝트 준비 프로젝트 생성 exop init react-native-todo //프로젝트 생성 cd react-native-todo npm install styled-components prop-types //프로젝트에서 사용할 라이브러리 설치 프로젝트에서 사용할 색상 정의 - theme.js export const theme = { background: '#101010', itemBackground: '#313131', main: '#778bdd', text: '#cfcfcf', done: '#616161', } 1.타이틀 만들기 import React f..

리액트 네이티브 스타일링은 웹 프로그램의 CSS 문법과 약간의 차이가 있다. 먼저 프로젝트를 생성해준다. expo init react-native-style 리액트 네이티브는 자바스크립트를 이용해 스타일링이 가능함. style 컴포넌트 속성이 있고, 인라인 스타일링 적용 or 스타일시트 사용 2가지 방법이 있다. 🤍스타일링 1. 인라인 스타일링 인라인 스타일링은 HTML 방식처럼 컴포넌트에 직접 스타일을 입력하는 방식이다. 웹프로그래밍 방식과 유사하지만, 위의 Text 컴포넌트처럼 비슷한 역할을 하는 컴포넌트에 중복 코드가 발생한다는 단점이 있다. 2. 클래스 스타일링 클래스 스타일링은 스타일시트(StyleSheet)에 정의된 스타일을 사용하는 방법이다, 위의 인라인 스타일링 방식보다 코드가 간결해진다...

🤍컴포넌트란? 재사용이 가능한 조립 블록, 화면에 나타나는 UI 요소이다. 단순히 UI역할만 하는 것이 아니라 부모로부터 받은 속성(props)이나 자신의 상태(state)에 따라 표현이 달라지고 다양한 기능을 수행한다. 🤍내장 컴포넌트 - Button 컴포넌트 버튼에 출력될 텍스트는 title 속성을 이용해 Button이라 지정하고, 버튼 클릭 시 Click이라는 확인창이 나타나도록 onPress 속성에 함수 지정 ◾실행 결과 🤍커스텀 컴포넌트 만들기 Button 컴포넌트는 Android와 iOS에서 다르게 보이기 때문에 TouchableOpacity를 사용하여 커스텀 컴포넌트 만들기 ◾실행 결과 MyButton.js에 onPress 함수를 주면 아래와 같은 결과가 나온다. 🤍props props란 p..

리액트 네이티브 개발환경 준비하기 🌈공통 Node.js / JDK / 안드로이드 스튜디오 💻맥 & 윈도우 맥 : 왓치맨 / Xcode , 윈도우 : 파이썬 나는 다른 것들은 다 세팅이 되어 있어서 파이썬만 추가로 설치했다. 리액트 네이티브 프로젝트 만들기 1. Expo Expo는 리액트 네이티브를 편하게 사용할 수 있도록 설정되어 있는 툴 완성된 프로젝트를 쉽게 배포, 관리할 수 있는 다양한 기능을 제공함 아래 명령어로 expo-cli를 설치 npm install --global expo-cli Expo 프로젝트 생성 생성된 프로젝트로 이동해서 프로젝트 실행 웹 브라우저에 페이지가 열리며 안드로이드 폰에서는 Expo 애플리케이션의 Scan QR Code를 이용하고, 아이폰은 기본 카메라 애플리케이션을 이..

리액트 네이티브(React Native) 란? 2015년 3월 페이스북에 의해 공개된 오픈소스 프로젝트 웹 브라우저가 아닌, iOS와 안드로이드(Android)에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크 리액트 네이티브 장점 두 플랫폼(iOS, Android) 동시 개발 가능 모바일 개발 지식이 없어도 자바스크립트만 알고 있으면 쉽게 시작할 수 있음. 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있는 Fast Refresh 기능 제공 리액트 네이티브 단점 리액트 네이티브가 네이티브 코드로 전환되는 장점은 있으나, 네이티브 새로운 기능을 사용하는데 오래 걸린다는 단점이 있음. iOS, Android에서 업데이트를 통해 새로운 API를 제공하더..