불변성이란? 리액트에서 객체와 배열 타입의 상태를 다둘 때는 불변성(immutability)을 지켜야 한다. 불변성을 지킨다는 것은 객체 또는 배열을 직접 수정하지 않는다는 것을 의미한다. 선언한 객체나 배열을 다른 값으로 변경하고 싶을때는 복제해 새로운 객체나 배열을 생성해야 한다. 불변성을 지켜야 하는 이유 리랙트에서 불변성을 지켜야 하는 이유는 렌더링 성능 최적화 방식 때문이다. 리액트에서는 부모 컴포넌트가 리렌더링(상태가 업데이트되어 다시 렌더링 되는 것)되면 기본적으로 자식 컴포넌트들 또한 리렌더링 된다. 문제는 변경사항이 없는 컴포넌트들도 리렌더링 된다는 것이다. 리액트는 최적화가 많이 되어있어서 리렌더링 된다고 성능에 부하가 발생하진 않지만, 컴포넌트에서 다루는 데이터가 많아지거나 연산량이 ..
React Native
키보드에서 Enter(return)를 눌렀을 때 onSubmitEditing 속성으로 함수를 호출할 수 있다. TextInput에 returnKeyType 속성은 키보드 완료 부분이 설정한 문자열로 보이게 설정할 수 있다. const onPress = () => { // .. 실행할 함수 } 위 코드에선 done으로 설정했는데 iOS 한국어 키보드를 켜보면 "완료"로 번역되어 나온다. 안드로이드에서는 체크 아이콘으로 설정되어있어서 설정할 필요는 없다. returnKyeType 속성은 상황에 따라 다음과 같은 값들을 지정할 수 있다. 플랫폼 공통 done : 완료 go : 이동 next : 다음 search : 검색 send : 보내기 iOS 전용 default : 기본 emergency-call : 긴급..
영역에 터치할때 효과를 줄 수 잇는 컴포넌트를 정리해보겠다. 터치할 수 있는 영역을 다음 컴포넌트 중 하나로 감싸면 된다. TouchableHighlight 터치했을 때 배경색을 변경한다. 아래 사이트에서 예제를 확인할 수 있다. TouchableHighlight · React Native If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. reactnative.dev TouchableOpacity 터치했을 때 투명도를 조정한다. activeOpacity 속성을 이용해 투명도의 정도(default 0.2)를 설정한다. TouchableOpacity..
사용자 입력값 받기 리액트 네이티브에서 사용자의 키보드 입력을 받아낼때는 TextInput 컴포넌트를 사용한다. import React from 'react'; import {View, StyleSheet, TextInput} from 'react-native'; function AddTodo() { return ( ); } const styles = StyleSheet.create({ container: { height: 64, paddingHorizontal: 16, // 좌우측 패딩 borderColor: '#bdbdbd', borderTopWidth: 1, borderBottomWidth: 1, justifyContent: 'center', }, input: { fontSize: 16, paddi..
이미지 사용하기 리액트 네이티브에서 이미지를 화면에 보여줄 때는 Image라는 컴포넌트를 사용한다. 여기 circle라는 이미지가 크기 별로 3가지가 있다. circle.png 파일 하나만 있어도 컴포넌트에 불러와 사용하는데는 지장이 없지만, 화면의 밀도에 따른 다른 이미지를 보여줘야 선명도가 일정하다. 리액트 네이티브에서 스타일링할 때 크기는 모두 dp로 설정한다. dp(density-independent pixel)란 1인치당 픽셀 밀도에 따라 크기가 일관된 UI를 보여줄 수 있는 단위이다. dp = px * 160 / ppi px = dp * ppi / 160 iPhone 11 Pro에 화면 해상도는 2436px * 1125px이고, 화면 밀도는 458ppi이다. 만약 iPhone 11 Pro에서 ..
디바이스에 최상단, 시간과 남은 배터리가 나타는 공간을 StatusBar라고 한다. 이곳에 색상을 바꿔보려고 한다. import React from 'react'; import {View, Text, StyleSheet, StatusBar} from 'react-native'; function DateHead({date}) { const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); return ( {year}년 {month}월 {day}일 ); } const styles = StyleSheet.create({ container: { padding: 16, backgroundColor: '#..
React에서 상태를 관리하는 가장 기본적인 방법은 useState라는 함수를 사용하는 것이다. React에는 use로 시작하는 다양한 함수가 내장되어 있는데, 이 함수들은 Hook이라고 부른다. Hook을 사용해서 상태 관리, 최적화, 컴포넌트 작동 흐름 관리 등 다양한 기능을 구현할 수 있다. 그 중에서 useState는 상태 값을 관리하는 함수이다. useState를 사용해서 상태를 적용해보자. import React, {useState} from 'react'; import {View, Text, Button, StyleSheet} from 'react-native'; function Box() { return ( UseState 예제 ); } function UseStateTest() { con..
Props 객체 구조 분해 할당이란 컴포넌트에서 Porps를 조회하는 코드를 더 짧게 구현하는 방법이다. 구조 분해 할당이라는 자바스크립트 문법을 사용하는 방법으로, '비구조화 할당'이라고 부르기도 한다. 이 문법은 객체 안에 있는 값을 더욱 짧은 코드를 사용해 밖으로 추출할 수 있게 해준다. import React from 'react'; import {Text, View} from 'react-native'; function PropsNotSeparated(props) { return ( name: {props.name} birth: {props.birth} ); } function PropsSeparated({name, birth}) { return ( name: {name} birth: {birt..
컴포넌트에 StyleSheet를 사용해 스타일을 적용할 수 있다. 리액트 네이티브에서는 별도의 css 파일에 스타일을 작성하지 않고, 자바스크립트 파일 안에서 StyleSheet라는 것을 사용한다. import React from 'react'; import {Text, View, StyleSheet} from 'react-native'; function Hello(props) { return ( Hello World ); } Hello.defaultProps = { size: 'medium', // 기본 사이즈 }; const styles = StyleSheet.create({ container: { backgroundColor: 'black', borderWidth: 4, borderColor: 'b..
Props Props는 properties를 줄인 말로 컴포넌트의 속성을 의미한다. Porps를 사용하면 컴포넌트를 사용할 때 임의의 값을 넣을 수 있다. 이 전 글에서 Hello 컴포넌트를 만들어 봤는데 여기에 Props를 적용해보겠다. import React from 'react'; import {Text, View} from 'react-native'; function add(a, b) { return a + b; } function hello(props) { return ( Hello World name : {props.name} add : {add(1, 1)} ); } export default hello; 위 코드 처럼 전달받은 props를 출력할때는 괄호({, })를 사용하면되는데 함수도 괄..
