프레임워크/React Native 6

[React Native] 생명주기와 useEffect()

Mounting 가장 처음 실행되는 단계 constructor에서 모든 것이 이루어지며, state와 prop, component 등을 준비시킴 rendering constructor에서는 http request와 같은 side effect를 실행시키지 말 것 총 4가지 메서드 constructor() static getDerivedStateFromProps() render() componentDidMount() Updating state나 prop이 바뀌어 re-rendering이 필요할 때 총 5가지 메서드 static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpda..

[ReactNative] FCM+AsyncStorage 설치 후 build failed

1. 현상 react native로 android를 타겟으로 한 프로그램 작성 도중에 아래와 같은 현상이 발생했습니다. 이전에 정상적으로 build와 emulator가 실행되었었고, FCM과 AsyncStorage 사용을 위한 패키지 설치 및 테스트 도중 발생하였습니다. 2. 문제 접근 1) [실패] app:mergeLibDexDebug FAILED mergeLibDexDebug에 관련하여 검색해본 결과, 아래와 같이 android/app/build.gradle에 추가 삽입이 필요하다는 내용을 확인하였습니다. android { ... defaultdConfig { ... multiDexEnabled true ... } dependencies { ... implementation 'androidx.mult..

React에서 string 안에 ${변수} 사용

이런... string 안에서 ${변수}를 사용하려면 '가 아니라 `를 사용해야한다. 세미콜론(;)급 통수다 ㅠㅠ ' Single Quote 세미콜론의 오른쪽에 있은 " (Double Qutoe)와 함께 string을 표현할 때 사용 ` Backtick 1의 왼쪽, ESC 아래, ~와 함께 있음 ${변수}를 인식 : string templating에 사용 이전에는 string의 concatenating을 사용해야하냐, templating을 사용해야하냐를 논했지만, 현재는 비슷하다고 판단하는듯 하다. concatenation이 빠르다는 말도, templating이 빠르다는 말도 있다. 참고 내용 [1] https://hello-bryan.tistory.com/120 React `string 안에 ${변수명..

React Native Tutorial (JSX, Component, State, Prop)

이 글은 "React Native docs의 tutorial"을 번역한 글입니다. https://reactnative.dev/docs/tutorial Learn the Basics · React Native React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and pr reactnative.dev 이 글을 통해 얻..

WSL(Windows Subsystem for Linux)에서 React Native 설치

WSL 설치 windows 앱스토어에서 설치 Nvm 설치 >> sudo apt-get update >> sudo apt install build-essential checkinstall libssl-dev >> curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.35.1/install.sh | bash (터미널 재시작) >> nvm --version 버전 확인 Npm 설치 >> sudo apt install npm Node 업데이트 >> npm cache clean -f >> sudo npm install -g n >> node -v >> sudo n stable (터미널 재시작) Expo 설치 >> npm install expo-cli -glob..