전체 글 (223) 썸네일형 리스트형 [근육고양이] TypeScript 변수와 타입 let과 const 그리고 변수 let으로 선언한 변수의 특징 변수의 값이 수시로 변경되어야 할때 사용한다. 명시한 타입 또는 타입 추론을 하여 타입이 결정되었을 때 해당 타입의 값으로만 값을 변경할 수 있다. const로 선언한 변수의 특징 변수의 값이 변경되지 않을 때 사용한다. 생성할 때 초기값을 반드시 명시해야한다. 기본화면 코드 먼저 보여주겠다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 import React, { Component } from 'react'; import {View, Text, Button, Alert,StyleSheet} from 'react-native'; export default class App e.. [근육고양이] 기획 개발환경 리액트 네이티브 + expo 타입스크립트 설명 근육고양이는 타입스크립트의 기초에 대해 다루는 프로젝트가 될 것이다. 프로젝트의 마지막에는 타입스크립트의 기초들을 목록으로 만들어 버튼을 누르면 해당 내용이 나오게 되는 앱을 만들 것이다. 기획의도 리액트 네이티브를 공부함에 있어서 타입스크립트에 대한 지식이 부족하다는 것을 글을 올리면서 계속 느꼈고 리액트 네이티브를 계속하는데 지장이 있다고 생각하여 타입스크립트 기초를 공부하면서 마지막에 앱을 하나 만들자라고 생각하여서 기획하게 되었다. 목표 타입스크립트에 대한 전반적인 지식 습득 [React Native] Props는 어떻게 사용할까? props는 state와 마찬가지로 리액트 네이티브에서 구성 요소를 제어하는 데이터 유형 중에 하나이다. 하지만 state와 다른 점은 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 import React, { Component } from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; export default c.. [React Native] State는 어떻게 사용할까? state는 리액트 네이티브에서 구성 요소를 제어하는 데이터 유형 중에 하나이다. state는 동적인 데이터를 다룰 때 주로 사용된다. state의 값을 바꾸고 싶다면 setState함수를 사용하여 바꿀 수 있다. 여기서 중요한 점은 setState가 호출될 때마다 해당 컴포넌트가 있는 뷰들은 다시 랜더링을 하게 된다. 이것은 state를 필요하지 않다면 너무 많이 선언하지 말라는 것과 같다. 불필요한 state는 너무 많은 뷰를 랜더링 하게 하기 때문이다. state변수는 setState를 통해서 값을 바꾸어준다. setState가 호출되면 해당 컴포넌트가 있는 뷰는 다시 랜더링하게 된다. 너무 많은 state는 앱의 기능 저하로 이어질 수 있다. 오늘의 기본 화면이다. 갑자기 개구리 생각이 나서 녹색.. [React Native] TextInput으로 텍스트 입력을 보여주자 InputText에 대한 이해가 부족한 상태로 To Do 앱을 만들려고 했다가 실패했다. InputText에 입력된 값을 가져오는 것을 어떻게 구현해야 할지 이해가 부족해서 그런 것 같다. 그래서 오늘은 InputText에 대해 공부해봤다. 오늘은 사용자가 TextInput에 텍스트를 입력하고 제출버튼을 누르게 되면 따로 만들어놓은 뷰에 사용자가 입력한 정보를 보여주는 것을 만들 것이다. style InputText에 스타일을 적용시켜주는 것이다. onChangeText InputText 안의 글자가 바뀔 때마다 호출되는 콜백이다. 텍스트는 단일 문자열 인수로 콜백 핸들러에 전달된다. ← 이거 중요하다 ★★★★★ placeholder InputText 안에 무엇을 입력해야하는지 힌트를 주는 것이다. 아래.. [React Native]FlatList 인터페이스 구현 리스트뷰에 대한 React Native 기능을 찾아보다가 FlatList를 찾았다. FlatList는 한 번에 모든 아이템의 뷰를 렌더링 하지 않고 사용자가 보고 있는 화면만을 렌더링 하여 메모리 사용에 더 효율적이라고 한다. data 표시할 정보에 대한 정보를 저장하기 위해 사용한다. renderItem 항목을 가져와 화면에 렌더링해준다. keyExtractor 항목의 고유한 키를 지정해주는 데 사용된다. DATA 배열 변수에 값들을 미리 선언해주었다. 이 값들은 설정해놓은 순서에 의해 화면에 렌더링 되게 될 것이다. key: 고유 키를 저장하는 변수 name: 이름을 저장하는 변수 major: 전공을 저장하는 변수 order: 순서를 저장하는 변수 name, major, order를 변수로 받고 출력.. [React Native] button을 만들어보자 어떠한 프로그램을 만들던 레이아웃이 있다면 버튼은 필수적으로 구현하고 자세하게 알아야 한다. 그래서 리액트 네이티브를 공부하는 입장에서 button을 만드는 방법에 대한 궁금증이 생겼고, React Native 홈페이지에서 찾아볼 수 있었다. onPress 사용자가 버튼을 눌렀을 때 호출되는 핸들러 title 버튼에 표시할 텍스트 color 배경 색상(android), 텍스트 색상(ios)을 설정 해준다. disabled 참인 경우 구성 요소에 대한 모든 동작이 작동하지 않는다. TouchableOpacity 버튼의 불투명도를 줄여 사용자가 버튼을 누른 상태에서 배경을 볼 수 있게 해 준다. TouchableOpacity의 기능은 위와 같지만 사실 TouchableOpacity는 커스텀 버튼을 만들기 위.. [React Native] Flexbox를 이용한 레이아웃 - (2) (1)에서 설명하지 못했던 나머지 속성들에 대해서 설명하겠습니다. (1)과 마찬가지로 설명에 앞서 기본 설정 코드를 보여드리겠습니다. 이렇게 코드를 전부 작성하게 되면 아래의 그림과 같은 화면이 나올 것입니다. 화면이 정상적으로 작동되었으면 먼저 flexWrap 속성에 대해서 설명하겠습니다. flexWrap은 자식 컴포넌트가 기본 축을 따라 컨테이너의 크기를 초과했을 때 어떻게 제어할 것인지에 대해 설정해주는 속성이다. 속성 추가는 부모 컴포넌트에 해주고, 기본 코드의 부모 컴포넌트 스타일은 styleContainer이다. wrap 자식 컴포넌트들을 줄 바꿈 하여 배치해준다. nowrap 자식 컴포넌트들을 1줄로 배치해준다. 여기서 nowrap은 기본 설정으로 별다른 설정을 하지 않으면 자식 컴포넌트들은.. 이전 1 ··· 22 23 24 25 26 27 28 다음 목록 더보기
