목록코딩 기록 (150)

타닥타닥 개발자의 일상

react UseMemo 사용하여 특정 함수만 호출되는 예제 보기 / typescript / useCallback함수 이용하여 버튼 클릭시 숫자 증가시키기

실행구문 npx react-native init sample22 --template react-native-template-typescript App.tsx import React, { useMemo, useState } from "react"; import { Button, Text, View } from "react-native"; /* useMemo: 연산된 값을 렌더링시에 재사용할때 사용된다 useMeMo(func,검사할 배열 ) */ function square(params:any){ const testData = [Array(10).keys] testData.forEach(()=>{ console.log(`계산중.. 루프처리 ${testData.length}회 실행중..`) }) return ..
코딩 기록/react 2022. 3. 8. 23:59
react 현재시간 화면에 나타나고 초마다 갱신되게하기 / typescript 시계 만들기

실행문 npx react-native init sample21 --template react-native-template-typescript App.tsx import React, { useEffect, useState } from "react"; import { StyleSheet, Text, View } from "react-native"; export default function App(){ return( ) } const Clock =() =>{ const [date, setDate] = useState(()=> new Date()) useEffect(()=>{ const timeId = setInterval(()=>tick(),1000) console.log('setInteval') retur..
코딩 기록/react 2022. 3. 8. 23:49
react / useEffect 써서 버튼 누를때 특정 텍스트 화면에 보이게 하기 / typescript

실행문 npx react-native init sample20 --template react-native-template-typescript​ App.tsx import React, { useEffect, useState } from "react"; import { Button, Text, View } from "react-native"; /* useEffect: 컴퍼넌트가 rendering 될때마다 특정 작업을 실행할 수 있도록 하는 hook compoentDidMount + componentDidUpdate + componentWillUnmount */ function Welcome(props:any) { console.log('start') useEffect(()=>{ //==$(document)...
코딩 기록/react 2022. 3. 8. 23:38
react / flex 이용하여 원하는 비율로 화면에 아이템 구현하기 / typescript

프로젝트 생성문 npx react-native init sample19 --template react-native-template-typescript src 폴더 생성 > components 폴더 생성 > Flexbox.tsx & Marginadding.tsx & WidthHeight.tsx 파일 생성 WidthHeight.tsx import React from "react"; import { StyleSheet, Text, View } from "react-native"; export const WidthHeight= () =>( 200X100 ) const style = StyleSheet.create({ container:{ width:200, height:100, borderWidth:StyleS..
코딩 기록/react 2022. 3. 7. 18:40
react / flex 속성 이용하여 화면 비율 조정하기 (typescript)

프로젝트 생성문 npx react-native init sample18 --template react-native-template-typescript App.tsx import React from "react"; import { StyleSheet, Text, View } from "react-native"; //flex : 크기 비율로 설정하는 것 export default function App(){ return ( 두번째 화면 ) } const style = StyleSheet.create({ container:{ flex:1, width:300 }, caseOne:{ flex:1, backgroundColor:'yellow' }, caseTwo:{ flex:1, backgroundColor:'bl..
코딩 기록/react 2022. 3. 7. 18:27
react / 색상코드와 방향 조절로 화면에 색상카드 만들기 / SafeAreaView / transform : rotateX, rotateZ

프로젝트 생성문 npx react-native init sample17 --template react-native-template-typescript App.tsx import React from "react"; import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native"; const colorList = [ { color: '#00974A', val: '00974A' }, { color: '#2e6067', val: '2e6067' }, { color: '#a92127', val: 'a92127' }, { color: '#030364', val: '030364' }, { color: '#0d6729', val: '0d6729' }..
코딩 기록/react 2022. 3. 7. 18:20
react 이미지 화면에 구현하기 (파일 불러와서 구현하기 / 이미지 주소로 구현하기) / 글자 자간, 글자 배경색 지정하기 / 텍스트 영역에 테두리 만들기 / imageview / text StyleSheet 모음

프로젝트 생성문 npx react-native init sample17 --template react-native-template-typescript 구현할 이미지는 scr>assets폴더에 저장해둔다. ship.jpg 파일을 저장해두었다. App.tsx import React from "react"; import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native"; export default function App(){ return( ) } 실행화면 글자 배경색, 글자 위치 지정하기 App.tsx import React from "react"; import { Image, SafeAreaView, StyleSheet, Text, Vi..
코딩 기록/react 2022. 3. 7. 18:15
react / checkbox 만들고 check된 화면에 상태 확인, 출력하기 (typescript, Checkbox, Button)

아이콘 참고 사이트 https://oblador.github.io/react-native-vector-icons/ react-native-vector-icons directory oblador.github.io 프로젝트 생성 npx react-native init sample16 --template react-native-template-typescript 필요한 부분 install npm i react-native-paper checkbox를 만들기 위해서는 android>app>build.gradle 부분을 수정해야한다. (제일 마지막 한줄 코드만 추가됨) build.gradle apply plugin: "com.android.application" import com.android.build.Out..
코딩 기록/react 2022. 3. 7. 17:44
react radio버튼 이용하여 값 선택하기 radiogroup radiobutton

프로젝트 생성후 아래의 설치문을 입력해서 radiobutton을 import한다. 설치문 npm i react-native-flexi-radio-button --save 설치문을 입력한뒤 생성된 node_modules>react-navtive-flexi-readio-button>lib를 방문하여 radioButton.js와 radioGroup.js를 편집해준다. radioButton.js import React, { Component } from 'react' import PropTypes from 'prop-types' import { StyleSheet, View, Text, TouchableWithoutFeedback } from 'react-native'; export default class R..
코딩 기록/react 2022. 3. 7. 17:36
react picker select, selectbox watcher 이용하여 다양한 데이터 선택하기

프로젝트 생성후 입력해야 하는 설치문 npm install react-native-picker-select npm install @react-native-picker/picker npm install watcher npm install react-native-svg@9 App.tsx import React, { useState } from "react"; import { Button, View } from "react-native"; import RNPickerSelect from 'react-native-picker-select' const values = [ {label:'Football', value:'축구'}, {label:'Baseball', value:'야구'}, {label:'Hockey',..
코딩 기록/react 2022. 3. 7. 17:26
Prev 1 2 3 4 5 6 7 8 ··· 15 Next