react, react-native

React-native 에서 숫자 카운트를 세는 프로그램을 만들어 보겠다. app.js에 이렇게 적고 import {View, StyleSheet } from 'react-native'; import {useState} from 'react' // 플러스 카운트 버튼 import PlusCount from './components/PlusCount' // 마이너스 카운트 버튼 import MinusCount from './components/MinusCount' // 숫자가 출력될 컴포넌트 import PrintNum from './components/PrintNum' export default function App() { const [countNum,setCountNum] = useState(0) c..

https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 먼저 이곳에서 어플리케이션을 생성한다. 여기서 REST API 키를 사용할것이다. 로그인을 활성화 해놓는다. Redirect URL을 설정한다. 필자의 환경은 Expo Go이라는 어플을 가지고 핸드폰으로 테스트 하였다. import React from 'react'; import { View } from "react-native"; import { WebView } from 'react-native-webview'; import axios fro..

Map 위 그림처럼 map을 사용하여 컴포넌트를 반복한다. item변수로 값을 받으며, idx변수로 인덱스값을 받아서 사용한다. ScrollView 스크롤이 필요한 부분에 ScrollView를 감싸주어 사용하면 된다. onMomentScrollBegin은 스크롤이 시작하자마자 사용되는 이벤트이며 onScroll은 스크롤 중에 사용되는 이벤트이다. TextInput 화면에 보여줄 값을 value에 적고 값을 입력받기 위해 onChangeText를 쓰며, 여러 줄을 사용할때 multiline을 사용한다. 만약 글자를 받고 싶지 않다면 editable을 사용하고 글자수를 제한하고 싶다면 maxLength를 사용하면 된다.

TochableOpacity TochableOpacity는 react-native에서 import하여 사용하며 클릭에 대한 이벤트를 넣고 싶은 컴포넌트를 위 사진처럼 감싸면 된다. 터치에 대한 이벤트는 여러가지가 존재한다. 대표적인 이벤트는 위 사진에 있는 4가지 가있으며 영어 그대로 조건이 조금씩 다르다. Button 위 사진처럼 title을 이용하여 버튼에서 표시하고 싶은 글씨를 적고, TochableOpacity와 동일하게 onPress를 사용하여 터치에 대한 이벤트를 처리한다.

State useState()를 사용하여 관리한다. react에서 import하여 사용하며, 리턴값은 두개이다. 리턴값중 첫번째 값을 표현할때 사용하며, 두번째 값을 변경할때 사용한다 setter라고 보면 된다. import {useState} from ‘react’ const [sample, setSample] = useState(false) 위의 코드 처럼 사용하면 된다. Props 위의 그림처럼 props로 값을 받고 props안에 있는 값들을 사용할 수 있다. 값을 넘겨줄때에는 위의 그림처럼 넘겨 주면 된다.

Inline Styling 컴포넌트 안에 style을 직접 줄려고 할때 사용하는 방식이다. 인라인 스타일에서는 중괄호가 2개 필요하다. 그이유는 첫번째 중괄호는 js코드이다 라는 뜻이며, 두번째 중괄호는 object형태로 이루어져 있기 때문에 적는 것이다. StyleSheet Class StyleSheet으로 미리 만들어 놓은 스타일을 불러와 적용하는 방식이다. react-native에서 import를 해야한다.

Rest Operator 위의 사진처럼 add라는 함수를 호출할 때... 이용하여 파라미터값을 받기 때문에 몇 개의 값이 오든 다 받아낼 수 있다. 주의 사항으로는 맨 마지막에만 사용을 해 주어야 한다. 만약 (x, ...y, z)로 선언을 하면... 이 붙은 변수가 다 받아서 처리하기 때문에 z는 필요 없는 변수가 되어 오류가 된다. 따라서 Rest Operator를 사용하려면 맨 마지막에만 사용하여야 한다. Spread Operator 위의 그림은 arrCopt라는 배역에 arr1의 값을 저장하는 것이다. 저번에 말했다시피 Array는 Object Type이여서 주소값을 저장한다. 따라서 let arrCopy = arr1이라고 선언을 하게 된다면 arrCopy와 arr1이 참조하는 메모리 공간은 같은..

함수 선언 방법은 다양하다. function test () {return "hello"} var test = function() {return "hello"} var test = () => {return "hello"} 위의 코드가 전부 함수를 선언할 수 있는 코드이다. 나중에 test변수를 호출하여 hello를 리턴하는 함수를 사용할 수 있다. 함수를 선언과 동시에 호출하는 방법도 있다. var test = (function(){ return "hello" }())//함수를 선언과 동시에 실행한다. 위의 코드를 사용하면 함수를 선언함과 동시에 실행이 된다. 따라서 test변수에는 hello를 리턴하는 함수가 들어가는게 아니라 hello자체가 들어가게 된다. (), {} 차이 var test = () =..