하랑파파꺼

React Native 함수형 컴포넌트 리액트 네이티브는 리액트 네이티브 컴포넌트를 반환화는 함수로 구성 이 때 반환하는 컴포넌트는 하나의 노드로 구성 야러 노드로 된 컴포넌트를 반환하려면 Fragment 컴포논트로 감싸서 반환 Fragment 대신에 의 Fragment 단축 문법 사용 가능 ex) => 에러 const App = () => { return ( ) } => 정상1 const App = () => { return ( ) } => 정상2 const App = () => { return ( ) } 리액트 네이티브에서의 화면 디자인은 html에서 인라인 스타일과 유사 스타일링 스타일을 사용하는 방법 StyleSheet.creat 함수를 사용하여 스타일 객체를 만든 후 스타일을 적용하고 싶은 부분..

모듈들의 버전 고정 npm config set save-exact=true 프로젝트 생성 react-native init {프로젝트 명} 프로젝트 실행 npm run ios npm run android - ios 특정 iphone 실행 npm run ios --simulator="iPhone 5s" npm run ios --simulator="iPhone 6" npm run ios --simulator="iPhone 6 Plus" npm run ios --simulator="iPhone 6s" npm run ios --simulator="iPhone 6s Plus" npm run ios --simulator="iPhone 7" npm run ios --simulator="iPhone 7 Plus" npm..

Homebrew 설치 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" Node 설치 brew install node - node 버전 확인 node -v - npm 버전 확인\ npm -v Watchman 설치 brew install watchman - 버전 확인 watchman -version React Native CLI 설치 npm install -g react-native-cli - 버전 확인 react-native --version Xcode 설치 Cocoapods 설치 sudo gem install cocoapods - 버전 확인 pod --version JAVA SD..

#vscode 확장 프로그램 추가 React-Native/React/Redux snippets for es6/es7 vscode-styled-components #vscode 확장 프로그램 추가 React-Native/React/Redux snippets for es6/es7 vscode-styled-components #노드 패키지 매니저를 통해 설치하는 라이브러리, 모듈들의 버전 고정하기 npm config set save-exact=true #프로젝트 생성 react-native init {프로젝트명} #typescript 로 프로젝트 생성 react-native init {프로젝트명} --template typscript #특정 버전으로 프로젝트 생성 react-native init -versio..

#Props 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터 부모 컴포넌트로부터 받는 데이터이므로 자식 컴포넌트에서는 변경이 불가능하다 컴포넌트의 속성과 같음을 의미 #State 한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용 컴포넌트 안에서 데이터를 변경 할 수 있다 컴포넌트의 상태를 의미

#절대경로로 컴포넌트 추가 - react-native에서는 컴포넌트를 추가할 때 상대경로 이용 - babel-plugin-root-import 를 이용하면 절대경로 사용 가능 - 설치 npm install --save-dev babel-plugin-root-import - 설정 -> babel.config.js module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ 'babel-plugin-styled-components', [ 'babel-plugin-root-import', { rootPathPrefix: '~', rootPathSuffix: 'src', }, ], ], }; -> tsconfig.json {..

#Styled components - react-native에서 스타일을 적용하는 방법 -> 인라인 방식 -> StyleSheet -> Styled Components - Styled Components를 사용하는 이유 -> react와 react-native에 동일한 스타일 코드를 적용 -> reac-native에서 스타일은 오브젝트 형식으로 사용 => text-align => textAlugn -> 동적으로 변경하는 스타일을 관리하기 쉽다 => props를 사용할 수 있다 -> 배포시 파일용량이 커진다 - Styled Components 설치 npm install --save styled-components npm install --save-dev @types/styled-components -> s..

#typescript - 설치 npm install typescript @types/react @types/react-native --save-dev -> typescript : typescript 라이브러리 -> @types/react : react의 타입이 정의된 파일 정의 파일 -> @types/react-native : react-native의 타입이 정의된 파일 정의 파일 - tsconfig.json -> typescript를 설정하기 위해 tsconfig.json 파일을 프로젝트 root 디렉토리에 생성 -> tsconfig.json 파일에 아래의 내용을 입력 { "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": tru..

#MAC 에서 react-native 개발환경 만들기 1. Homebrew 설치 - Homebrew 설치 확인 및 버전 확인 brew --verion - Homebrew 설치 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2. Nodejs 설치 brew install node node -–version 3. Watchman 설치 brew install watchman watchman –version 4. React Native CLI 설치 npm install -g react-native-cli react-native --version 5. Xcode 설치 App Store를..