발아

보호되어 있는 글입니다.

react native 앱을 클론코딩하려고 따라던 중 영상에는 Expo Developing Tools의 Run in web browser가 기본적으로 활성화 되어있는 버튼이 나에게는 비활성화 되어있었다. 한국어 영어 번갈아가며 여러번 검색해도 나와 동일한 사항을 겪는 사람을 못봐서 스택오버플로우에도 올려볼까 하다가 영어로 검색하면 젤 먼저 나오는 expo공식 문서를 참고해 아래 설치 명령을 프로그램의 루트폴더에 입력하고 다시 들어가보니 Run in web browser가 활성화되었다. npx expo install react-dom react-native-web @expo/webpack-config

JSON calendar = {"year":2022,"month":10,"day":20,123:456} 일때 key 값으로 value값 읽기 calendar.year 2022 출력 calendar.month 10 출력 key가 숫자일때 value값 읽기 calendar['123'] 456 출력 변수인 key로 value값 읽기 const tmp = year; 에서 tmp값을 key로 value값 읽으려면 calendar[tmp] 2022 출력 JSON to String JSON.stringify(calendar) {"year":2022,"month":10,"day":20,123:456} 출력

"export 'viewproptypes' was not found in 'react-native-web/dist/index' 오류 react-native-modal라이브러리의 modal쓰는 과정에서 오류 발생 ViewPropTypes에 변경사항이 발생한 것이 원인으로 추측 해결방법 package.json과 같은 디렉토리에 아래 내용의 fix.bat파일 추가 @echo off echo 'Fixing ViewPropTypes issues' REM Fix ViewPropTypes issues ECHO export const ViewPropTypes = { style: null };>>"node_modules/react-native-web/dist/index.js" ..

useEffect 활용 useEffect를 활용해 마운트시, 언마운트시 각각 원하는 이벤트 사용 마운트시 코드 useEffect(() => { 마운트시 실행하고싶은 이벤트 }, []); 언마운트시 코드 useEffect(() => { return () => 언마운트시 실행하고싶은 이벤트; }, []); 예시 //마운트시 실행하고싶은 이벤트 const timerStart = () => { increment.current = setInterval(() => { setTimer((timer) => timer + 1) }, 10)) } //마운트시 이벤트 실행되도록 설정 useEffect(() => { timerStart(); ), []};

View UI를 구축하기 위한 가장 기본적인 구성 요소로 중첩이 가능하고 일부 터치 핸들링 및 접근성 제어가 가능하다. 코드 예시 import React, { Component } from 'react'; import { StyleSheet, View, SafeAreaView } from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, }, style1: { height: 50, width: 50, marginTop: 50, marginBottom: 50, marginLeft: 50, marginRight: 50, backgroundColor: '#e93e42', }, style2..

Button 코드 클릭시 출력되는 함수} /> title 속성과 onPress 속성은 반드시 기입 예제 1 버튼 출력 텍스트와 클릭시 호출되는 함수만 지정 import React from 'react'; import { Button, View, SafeAreaView, Alert } from 'react-native'; const App = () => ( Alert.alert('Button pressed')} /> ); export default App; 실행결과 클릭시 예제 2 버튼에 색깔 지정 import React from 'react'; import { Button, View, SafeAreaView, Alert } from 'rea..

useMemo 동일한 연산의 반복 수행을 제거해 성능을 최적화 코드 useMemo(() => {함수}, [함수 실행 조건]); 두번째 파라미터인 함수 실행 조건은 배열 렌더링 될때마다 호출하는것이 아닌 지정된 값에 변화가 있는 경우에만 함수가 호출 예제1 useMemo 미사용 import React, { useState, useMemo } from 'react'; import { StyleSheet, SafeAreaView, Text, Button } from "react-native"; const styles = StyleSheet.create({ text: { fontSize: 20, textAlign: "center", marginTop: 10, marginBottom: 10, pad..

useRef 특정 컴포넌트를 선택해야할 때 사용하는 Hooks 함수 코드 const ref = useRef(초기값); 예제 import React, {useState, useEffect, useRef} from 'react'; import { StyleSheet, SafeAreaView, TextInput } from "react-native"; const styles = StyleSheet.create({ textInput: { marginTop: 20, marginBottom: 10, paddingHorizontal: 10, height: 40, borderRadius: 10, borderColor: 'gray', borderWidth: 1 } }) const Form =..

useContext 컴포넌트가 렌더링될 때마다 원하는 작업이 실행되도록 설정할 수 있는 기능 사용 방법 useEffect(() => {}, []); useEffect(() => {첫 번째 파라미터}, [두 번째 파라미터]); 첫번째 파라미터 : 전달된 함수가 조건을 만족할 때마다 호출 두번째 파라미터 : 배열을 이용해 함수가 호출되는 조건을 설정 예제 1 컴포넌트가 화면에 마운트 되었을때 최초로 한번 실행 useEffect의 두 번째 파라미터에 빈 배열을 전달 useEffect(() => { console.log('Component Mount'); }, []); 예제 2 컴포넌트가 화면에서 언마운트 되었을때 최초로 한번 실행 useEffect의 실행조건을 빈 배열로 useEffect(() ..