KEEP CODING

iOS를 사용하는 아이폰에서는 최근 몇년간 노치디자인의 핸드폰이 나오고 있다. 하지만 View를 사용해 만든 어플에서는 노치에 대응하지 못해 윗부분이 노치에 가려지는 경우가 발생한다. 왼쪽과 같이 노치 부분에 내용이 들어가게 된다. SafeViewArea 컴포넌트를 사용하면 위아래 공간에 여백을 만들어주어 내용이 겹치지 않도록 한다. View 대신 SafeViewArea를 사용하면 된다. iOS에서만 적용되며, Android에서는 View와 같은 모습을 보여준다. 참고한 사이트 https://www.codetd.com/en/article/6433019 React Native adapted IPhoneX series equipment - Code World SafeAreaViewThe aim is to r..

디자인 메인 화면에 날짜를 확인할 수 있고, 할일 목록에서 완료된 비율을 나타내는 바를 만들어 한 눈에 들어오도록 한다. 입력은 하단의 textInput에서 가능하다. 구현해야 할 기능 날짜 표시 휴일엔 색 다르게 표현 진행률 표시 todo 입력 아무런 값이 입력되지 않으면 할일 목록에 저장하지 않는다 todo 완료 다시 미완료로 수정할 수 있다 todo 수정 todo 삭제 저장(새로고침해도 남아있도록) 사용할 언어 React Native

Props Props를 이용해 스타일에 데이터를 전달해 그 값에 따라 스타일을 다르게 적용할 수 있다. 삼항연산자 사용가능 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 // input.js import React, { useState } from 'react'; import styled from "styled-components/native"; const StyledInput = styled.TextInput` padding: 10px; font-size: 20px; border: 1px solid ${({ text }) => (text ? "red" : "black")}; `; const Input = ({p..

Styled Component Javascript 파일 안에 style 코드를 작성할 수 있는 라이브러리. style이 적용된 component를 만드는 라이브러리이다. CSS에서 작성하듯이 style코드를 작성할 수 있다. (참고:기존 RN에서의 style 코드 작성 방법은 아래 참고) https://joylee-developer.tistory.com/146 React Native - style 적용하기 React Native에서는 여러가지 방법으로 스타일을 적용할 수 있다. 스타일 적용 방법 inline/StyleSheet 사용 두 가지가 가능한데, 여러가지 조합으로 적용할 수 있다. 1. inline 으로 적용하기 style={{ backgroun joylee-developer.tistory.com..

그림자 그림자는 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 함수형 컴포넌트를 사용한 적이 있지만, 글로 정리한 것이 없어서 여기에서는 짧게 정리하..