TypeScript (9) 썸네일형 리스트형 [근육고양이] TypeScript 함수 TypeScript에는 function, 화살표(=>)를 사용하여 함수를 만들 수 있다. function의 기본적인 함수 구조이다. 1 2 3 function 함수 이름(매개변수1, 매개변수2, ...):반환값 타입{ 함수 내용 } function을 사용한 기본적인 함수이다. 1 2 3 function Sum (number1:number, number2:number):number{ return number1 + number2 } 함수 이름 Sum과 매개변수 number1, number2 반환값 타입 :number 반환값 return number1 + number2로 이루어진 가장 기본적인 함수이다. 화살표(=>)의 기본적인 함수 구조이다. 1 const 함수 이름 = (매개변수1, 매개변수2, ...):.. [근육고양이] TypeScript 클래스 클래스는 객체를 만들어내기 위한 설계도이다. 타입스크립트의 기본적인 클래스 선언 방법이다. 클래스 사용 1 2 3 4 5 6 7 8 9 10 11 12 class MuscleCat{ name: string muscleMass: number cute?: boolean } function Cat() { let normalCat01: MuscleCat = new MuscleCat() normalCat01.name = 'Mason', normalCat01.muscleMass = 30 console.log(normalCat01) //MuscleCat {"muscleMass": 30,"name": "Mason",} } 클래스 안에 필요한 속성들을 정의하여 준다. MuscleCat 클래스에 new 연산자를 적용해 n.. [근육고양이] TypeScript 객체와 인터페이스 객체와 인터페이스 객체 object타입은 number, string, boolean 타입의 값을 초기값으로 가질 수는 없지만 객체로 선언된 값들은 모두 가질 수 있다. 1 2 3 4 5 function ObjectExample() { let object_ex: object = { name: '근육고양이', age: 13} object_ex = 1 //Type '1' is not assignable to type 'object'. object_ex = {hello: '안녕', introduce: '내 이름을 소개하지', name: '난 근육고양이'} } 위의 코드처럼 {}를 사용하여 객체로 만들어서 값을 넣어주면 object타입의 변수에 값을 넣어줄 수 있다. 인터페이스 interface는 객체의 타입을 .. [근육고양이] 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 안에 무엇을 입력해야하는지 힌트를 주는 것이다. 아래.. 이전 1 2 다음
