Frameworks

Animated.Value() 메모리에 보간값 ( 0 ~ 1 )을 저장하기 위한 클래스 애니메이션 효과를 주기 위해서, 보간값을 사용해야한다. ( 보간값 - 매우 작은단위로 변화하는 값, 0 -> 0.0001 -> 0.0002 -> ... -> 0.9999 -> 1 ) Animated.CompositeAnimation 하나의 애니메이션 동작을 담고 있는 객체 하나의 애니메이션을 관리하는 메서드 Animated.timing() - delay 지정 가능Animated.spring() 여러개의 애니메이션을 관리하는 메서드 Animated.sequence(CompositeAnimation[]) - 일정 딜레이로 여려개의 애니메이션 관리 Animated.stagger(delay ,CompositeAnimation..

컴포넌트 마운트란? 컴포넌트 생성부터, 최초 렌더링까지의 과정 컴포넌트 언마운트란? 화면의 렌더링된 컴포넌트를, 삭제하기 까지의 과정 컴포넌트 렌더링 시작 useLayoutEffect 호출 컴포넌트 렌더링 완료 useEffect 호출 onLayout 이벤트 발생 컴포넌트 언마운트 시작 useLayoutEffect 반환 함수 호출 useEffect 반환 함수 호출 컴포넌트 언마운트(파괴) 완료

useState import React, {useState} from 'react'; export default function myState() { const [state, setState] = useState(); /* 인자로, number type의 변수를 받거나, 인자로, number type의 변수를 반환하는 함수를 받고, [number, (number)=> void] 형식의 배열을 반환한다. */ }

luxon 란? 날짜, 시간 관련 기능을 처리하는 Node.js 패키지 luxon 설치 npm i luxon luxon 사용법 현재시각 가져오기 import {Datetime} from 'luxon' console.log(Datetime.now()) JS Date객체를, luxon Date객체로 바꾸기 fromJSDate() 메소드를 사용한다 import {Datetime} from 'luxon' const jsDate = new Date() console.log(Datetime.fromJSDate(jsDate)) luxon Date객체가, 현재 시각부터 얼마나 전인지 확인하기 toRelative() 메소드를 사용한다 import {Datetime} from 'luxon' const preDate = ..

react-native-paper란? React native에서, UI 색상을 쉽고 세련되게 꾸밀 수 있도록 도와주는 Node.js 패키지 React Native Paper React Native Paper is a high-quality, standard-compliant Material Design library that has you covered in all major use-cases. reactnativepaper.com react-native-paper 설치 npm i react-native-paper react-native-paper 사용하기 Colors 객체에서, 색상 정보를 꺼내 사용한다. ( 파란색 - Colors.blue500 ) 500 : 주색상 200 : 주색상의 연한 버전 70..

React는 javascript로 이루어져 있으므로, 홈페이지를 꾸미기 위해서는 CSS엔진이 필요하다 Yoga - css엔진 (C++로 구현됨) Yoga엔진은 기존의 css엔진과 비슷하나, 약간의 차이점이 존재한다. 기존엔진 justify-content : center Yoga엔진 justifyContent : center React Native에서 컴포넌트 꾸미기 (스타일링) 1. 뷰 컴포넌트 이름에 View가 들어간 컴포넌트는, backgroundColor 속성을 사용해 배경색을 지정할 수 있다. 2. 텍스트 컴포넌트 Text 컴포넌트는, color 속성을 사용해 글자색을 지정할 수 있지만, 배경색은 지정할 수 없다 인라인 스타일로 꾸미기 인라인 : 컴포넌트의 기본속성인 style을 이용해, 컴포넌..

ws란? 클라이언트와 서버사이의 Websocket 통신을 하게 해주는 Node.js 패키지 ws 설치 npm i ws express와 합치기 ( http + websocket ) import http from 'http' import {WebSocket} from 'ws' /* import express from 'express' const app = express() const server = http.createServer(app); */ const server = http.createServer(); // http 서버 만들기 const wss = new WebSocket.Server({ server }); // 웹소켓 서버 만들기 function handleConnection(socket) { c..

React의 API란? JSX 구문에서 사용되지않고, OS의 javascript엔진에서 사용하는 모든 기능 React Native API Alert 대화 상자를 보여주는 API import {Alert} from 'react-native' // API 불러오기 Alert.alert("제목", "메시지") // React Native에서 함수형식으로 사용 StyleSheet API [React.js] React와 CSS React는 javascript로 이루어져 있으므로, 홈페이지를 꾸미기 위해서는 CSS엔진이 필요하다 Yoga - css엔진 (C++로 구현됨) Yoga엔진은 기존의 css엔진과 비슷하나, 약간의 차이점이 존재한다. 기존엔진 just defineall.tistory.com Platform ..

속성이란? 클래스의 멤버변수 ( 클래스 내부 다양한 타입의 변수 ) React 컴포넌트의 속성 컴포넌트는, UI를 구성하는 "클래스" 이므로, 속성을 가질 수 있다. 리액트는 컴포넌트의 속성이 바뀌면, 즉시 화면에 반영한다. ( 재렌더링 ) JSX는 XML이므로, 모든 속성(attribute)는 따옴표 혹은, 중괄호로 감싸져야 한다. 속성값이 객체일때는 중괄호를 하나 더 사용해, 새로운 객체를 만들 수 있다. 기본 속성 React와 React Native의 컴포넌트는 key, children, ref 등의 속성을 기본적으로 가진다. key 속성 React가 컴포넌트의 렌더링 속도를 최적화하기 위한 속성 style 속성 React가 컴포넌트의 스타일을 지정하기 위한 속성 ( 객체를 설정해야한다. ) ref..