React_ReactNative (5) 썸네일형 리스트형 React Native 시뮬레이터 reload 맥에서 cmd + D 누르면 아래 화면이 나옴 (iOS 시뮬레이터) 안드로이드 시뮬레이터는 cmd + M 이네 터미널에서 r 눌러도 됨 Windows React Native 환경 셋팅 이거 부터 설치 choco https://chocolatey.org/install Installing Chocolatey Chocolatey is software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages. Chocolatey integrates w/SCCM, Puppet, Chef, etc. Chocolatey is trusted by businesses to manage software deployments. chocolatey.org 파워쉘 -관리자 권한으로 열기 아래 링크에서 시키는 대로 choco 활용 설치 https://reactnative.. React 성능 개선 하기 크롬 확장 프로그램 설치 하면 (React Developer Tool) component, profiler 생김 아래 그림에서 각각 컴포넌트 A, B 별 렌더 시간 나옴 React.memo 사용하여 성능 개선 const Message = React.memo(({ message }) => { return {message} }) useCallback 활용한 함수 최적화 아래 처럼 감싸서 함수 전달 하면 값, 참조 위치 등이 변할 때만 렌더링 됨 const B = ({message, posts}) => { console.log("B is rendered"); const testFunc = useCallback(() => {}, []); return ( B Component ) } useMemo 활용한 결과값 .. TypeScript Project 준비 react native cli npx react-native init RealApp --tamplate react-native-template-typescript@6.12.6 ios의 경우 podfile -> hermes_enabled :false 로 변경 후 pod install Android android>app>build.gradle 에서 enabledHermes: false xcode 에서 bundle identifier 셋팅 Android도 android > app > src > java > com > RealApp > MainActivity.java 에서 맨 위 package 를 vscode 전체 찾기 변경(replace)해서 ios 와 동일하게 변경 터미널 두개로 확인 한개는 Metro 확인.. Study 첫 시작 아니 이렇게 쉬운 방법이... Expo Cli 라는 걸 활용해서 아래와 같이 실행하면 내 폰에 바로 테스트 앱이 실행 됨 심지어 코드 수정하면 바로 반영 됨.... 여태 몰랐네 이걸 npx create-expo-app first-my-app cd first-my-app npx expo start 서버 실행 중에 r 누르면 reload expo vector icon 에서 다양한 아이콘 찾을 수 있음 https://icons.expo.fyi/ @expo/vector-icons directory icons.expo.fyi safe area 관련 https://www.npmjs.com/package/react-native-safe-area-context react-native-safe-area-context A.. 이전 1 다음
