전체 글
-
[React-Native] #5_리액트 훅 (2) useMemo&useCallback공부일기/React Native 2021. 5. 29. 11:19
목차 캐시? useMemo useCallback 1. 캐시? useMemo와 useCallback은 각각 값과 함수를 캐시 하는 시스템이다. 캐시란 실제데이터를 가지지 않고 리액트 프레임워크 내부에 저장을 하고 이를 불러와서 사용하는 시스템이다. 리액트 훅의 useMemo와 useCallback은 의존성이 바뀌면 자동으로 캐시의 값을 갱신해주고 이를 화면에 반영하게 된다. 2. useMemo 형식 import {useMemo} from 'react' const 캐시_데이터 = useMemo(콜백함수, [의존성목록]) //콜백_함수는 데이터를 반환 ex) () => 원본_데이터 함수 컴포넌트 안에 생성된 데이터는 해당 컴포넌트가 렌더링 될때마다 재생성되는 문제가 있다 따라서 데이터를 useMemo훅으로 캐..
-
[React-Native] #5_리액트 훅 (1) useState&useEffect공부일기/React Native 2021. 5. 22. 00:36
목차 리액트 훅(React Hook)이란? useState useEffect 1. 리액트 훅(React Hook)이란? Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수 함수형 컴포넌트가 등장하면서 기존의 클래스 컴포넌트의 단점인 복잡한 코드와 재사용을 위한 데이터 캐시 시스템의 API 훅 목적 기본 훅 useState 상태 유지 및 변경 useEffect 이벤트 처리 useContext 정보 공유 추가 훅 useReducer 상태 유지 및 변경 (Redux) useCallback 콜백 함수 캐시 useMemo 데이터, 값 캐시 useRef . useImperativeHandle . useLayout..
-
[React-Native] #4_스타일링공부일기/React Native 2021. 5. 20. 03:08
목차 스타일 지정 StyleSheet 기본 스타일 속성 1. 스타일 지정 기존 코드에 View컴포넌트를 추가해서 화면을 구성한 코드이다. import React from 'react' import {View, SafeAreaView, Text} from 'react-native' import ArrowComponent from './src/screens/ArrowComponent' const realName = '2HS' export default function App() { return( Hello RN World! ) } 위 코드에 스타일을 지정해준 코드이다. import React from 'react' import {View, SafeAreaView, Text} from 'react-native..
-
[React-Native] #3_리액트 네이티브의 기초공부일기/React Native 2021. 5. 18. 02:32
목차 기본 문법 컴포넌트 속성 기본적인 코어 컴포넌트 1. 기본 문법 (XML) import React from 'react'; //코드를 자바스크립트로 만들어주는 필수요소 import {SafeAreaView, Text} from 'react-native'; //사용할 코어 컴포넌트 //함수형 컴포넌트 export default function App() { return( Hello RN World! ) } RN은 [JSX = 자바스크립트 + XML(return문 내부 태그가 있는 구문)]이다. App(함수형 컴포넌트) 내부의 return문을 보면 시작 태그와 끝 태그가 꼭 있어야 한다. (시작 태그에는 속성 값을 표기 가능) SafeAreaView 컴포넌트 안에 Text 컴포넌트가 존재한다. 따라서 ..
-
[React-Native] #2_맥OS 개발 환경 구축공부일기/React Native 2021. 5. 17. 02:05
목차 홈브루(Homebrew) 설치 비주얼 스튜디오 코드(Visual Studio Code) 설치 Node.js 설치 자바8 JDK 설치 Xcode 설치 코코아팟(CocoaPods) 설치 워치맨(Watchman) 설치 안드로이드 스튜디오(Android Studio) 설치 리액트 네이티브 CLI (React Native CLI) 설치 프로젝트 생성 및 실행 확인 1. 홈브루(Homebrew) 설치 맥에서 사용하는 설치 프로그램인 홈브루 : https://brew.sh/ 에서 명령을 복사 후, 터미널에서 실행하여 설치 진행 Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 2. 비주얼 스튜디오 코드(Visual Studio Code) 설치..
-
[React-Native_Error] npm run ios 에러(npm ERR! code ELIFECYCLE errno 1)오류일기/React Native 에러 2021. 5. 16. 04:35
에러 발생 리액트 네이티브 환경설정 이후, npm start / npm run android / npm run ios를 차례차례 시도하는 중 npm run ios 에서 code ELIFECYCLE 에러가 발생했다. 캐시 정리 npm cache clean --force 파일 삭제(node_modules, package-lock.json) rm -rf ./node_modules rm -rf ./package-lock.json npm 재설치 npm install 구글링 해서 해결방법을 찾아봤고 가장 많은 글인 위의 방법을 시도했다. 이후 재시도해봐도 같은 에러가 발생했다. 해결 방법 알고 보니 FLIPPER의 버전 문제였다. 현재 나의 Xcode 버전은 12.5 이에 맞는 새로운 버전 Flipper가 필요하다..
-
[React-Native] #1_리액트 네이티브란?공부일기/React Native 2021. 5. 14. 01:54
리액트 네이티브 2015년 페이스북이 발표한 프레임워크 크로스 플랫폼 : 하나의 소스코드로 여러 운영체제에서 동작하는 앱 개발 가능 자바스크립트 vs 타입스크립트 자바스크립트는 개발자의 사소한 실수를 캐치할 수 없어서 개발의 유지보수비용이 높음 타입스크립트는 자바스크립트의 단점을 커버되면서 100% 호환 학습 방향 최신 트렌드에 맞춰서 타입스크립트를 사용하여 리액트 네이티브를 학습 (리액트 훅 & 애니메이션 & 내비게이션 & 리덕스) 맥으로 Android 앱과 iOS 앱을 동시 실습