KEEP CODING

그림자 그림자는 OS(Platform)마다 설정 방법이 다르다. 플랫폼 속성 iOS shadowColor, shadowOffset, shadowOpacity, shadowRadius android elevation 다른 플랫폼의 설정들은 무시된다. 각각 설정은 아래와 같다 shadowColor 색상 "color" shadowOffset 넓이/높이 {width: number, height: number} object형식으로 작성해야 한다. shadowOpacity 투명도 0과 1 사이의 수 shadowRadius blur radius 숫자 elevation shadow크기 0을 포함한 정수 shadowOffset은 넓이와 높이라고 되어있지만 shadow의 위치라고 생각하면 된다. 음수도 가능하다. 아래 예..

flex 주 축을 따라 사용가능한 공간을 채울 방법을 정의한다 View(container) 안에 세 개의 View를 배치한다. 빨간색(flex: 1), 주황색(flex: 2), 초록색(flex: 3)으로 만든 경우, 주어진 상위의 View를 1+2+3=6으로 나눈 영역을 1개, 2개, 3개 가진다고 생각하면 된다. 정렬 기본적으로 React Native안에서는 flexDirection : column을 기본값으로 배치한다. 아이템을 배치하면 위에서 차례로 쌓이게 된다. justify-content flex-direction의 방향대로 정렬하는 방법은 justify-content로 결정한다. (flex-direction: row 인 경우 row방향(가로)으로 어떻게 배치할 것인가를 정한다) align-it..

React Native에서는 여러가지 방법으로 스타일을 적용할 수 있다. 스타일 적용 방법 inline/StyleSheet 사용 두 가지가 가능한데, 여러가지 조합으로 적용할 수 있다. 1. inline 으로 적용하기 style={{ backgroundColor: "black", color: "white", fontSize: 30 }} 2. StyleSheet 사용하기 style={styles.text} 3. StyleSheet 여러개 사용하기 style={[ styles.text, styles.errorText ]} 4. StyleSheet와 inline 함께 적용하기 style={[ styles.text, { color: "blue"} ]} 여러개의 StyleSheet나 StyleSheet+inlin..

React에서의 Props, State, useState, 이벤트 등을 그대로 사용한다. 클래스형 컴포넌트에서 어떻게 사용해야하고, 동작하는지는 React강의를 들으며 정리한 자료에 나와있다. 이벤트, setState https://joylee-developer.tistory.com/111 생활코딩 React 강의 (6) - 이벤트 이벤트 props, state, event 삼자가 상호작용하며 애플리케이션의 역동성을 만든다. 우리가 만들고 싶은 이벤트는 list 목록을 클릭했을 때, 아래의 내용이 바뀌는 것을 목표로 한다. 그러면 아래와 같 joylee-developer.tistory.com 이벤트 만들기 https://joylee-developer.tistory.com/112 생활코딩 React 강의 ..

React에서의 Props, State, useState, 이벤트 등을 그대로 사용한다. 클래스형 컴포넌트에서 어떻게 사용해야하고, 동작하는지는 React강의를 들으며 정리한 자료에 나와있다. State https://joylee-developer.tistory.com/110 생활코딩 React 강의 (5) - State Props와 State props : component를 조작하는 장치(사용자 입장) state : props값에 따라서 구현에 필요한 데이터들(개발자 입장) 사용자는 props를 이용해 component 조작하지만, state까지 알 필요가 없다. (우.. joylee-developer.tistory.com 이벤트, setState https://joylee-developer.tist..

React에서의 Props, State, useState, 이벤트 등을 그대로 사용한다. 클래스형 컴포넌트에서 어떻게 사용해야하고, 동작하는지는 React강의를 들으며 정리한 자료에 나와있다. JAX, 컴포넌트 생성, Props https://joylee-developer.tistory.com/106 생활코딩 React 강의 (3) - 컴포넌트, 다른 파일로 컴포넌트 분리하기 리액트가 없다면 코드를 그대로 다 html문서에 작성해야 한다. 코드가 많아질수록 한 눈에 구조를 보기 힘들다. 이럴 때 리액트를 사용하면 컴포넌트의 이름으로 간단하게 html 문서를 구성할 수 joylee-developer.tistory.com 함수형 컴포넌트를 사용한 적이 있지만, 글로 정리한 것이 없어서 여기에서는 짧게 정리하..

React에서의 Props, State, useState, 이벤트 등을 그대로 사용한다. 클래스형 컴포넌트에서 어떻게 사용해야하고, 동작하는지는 React강의를 들으며 정리한 자료에 나와있다. JAX, 컴포넌트 생성, Props https://joylee-developer.tistory.com/106 생활코딩 React 강의 (3) - 컴포넌트, 다른 파일로 컴포넌트 분리하기 리액트가 없다면 코드를 그대로 다 html문서에 작성해야 한다. 코드가 많아질수록 한 눈에 구조를 보기 힘들다. 이럴 때 리액트를 사용하면 컴포넌트의 이름으로 간단하게 html 문서를 구성할 수 joylee-developer.tistory.com 함수형 컴포넌트를 사용한 적이 있지만, 글로 정리한 것이 없어서 여기에서는 짧게 정리하..

Expo 다양한 기능을 제공해 리액트 네이티브 개발을 도와주는 도구이다. 장점 : 개발자의 편의를 돕는 도구를 사용할 수 있다. 단점 : expo에서 제공하는 기능 외의 네이티브 모듈을 추가로 사용할 수 없다. 리액트 네이티브 버전이 업그레이드 되도 expo가 업그레이드 되기 전까지는 그 기능을 사용할 수 없다. https://expo.canny.io/ Expo Feedback Give feedback to the Expo team so we can make more informed product decisions. Powered by Canny. expo.canny.io 위의 사이트에서 엑스포 로드맵과 피드백 내용을 확인할 수 있다. expo 프로젝트 만들기 * 원하는 운영체제의 모바일 디바이스가 있는..

리액트 네이티브란? 기본적으로 iOS 어플과 Android 어플은 다른 프로그래밍 언어로 만들어진다. 그래서 같은 어플인 것 같아 보이지만 따로 만들어야 했다. 그런데 React Native는 Javascript로 작성한 어플을 iOS와 Android에서 모두 사용할 수 있도록 변환해주는 프레임워크로 한 번의 개발로 두 운영체제에서 사용할 수 있는 어플을 만들 수 있다. 리액트 네이티브는 중간에서 Bridge(다리)역할을 한다. Native Thread Bridge(React Native) Javascript Thread iOS 혹은 Android UI 랜더링이 이뤄짐 두 Thread 사이에서 통신을 담당 Javascript 가 실행되는 공간 참고한 사이트 https://www.reactnative.gu..