coding- w00se

Collapsible view는 '접을 수 있는 요소'로 사용자의 터치에 따라 접히고 펼쳐지는 요소를 말합니다. React native에는 react-native-collapsible라는 라이브러리가 존재합니다. 해당 라이브러리는 github start가 2.1k이며 npm에서 weekly downloads가 5만이 넘을 만큼 많은 사람들이 이용하는 라이브러리인 거 같습니다. 빠르게 기능을 도입해야 한다면 해당 라이브러리를 이용하는 것도 좋을 거 같아요😊 https://github.com/oblador/react-native-collapsible 저는 해당 기능을 직접 구현하고 싶은 마음이 있어서 구현해봤습니다. 제가 구현한 예시는 아래와 같습니다. * 구현을 위해 react-native-reanimte..

React의 컴포넌트 안에 로컬 함수를 정의하면 컴포넌트가 다시 렌더링 될 때마다 함수가 새로 만들어진다. 더 자세히 말하면 함수가 새로운 메모리 주소에 다시 만들어 지는 것이다. useCallback을 사용하면 특정 조건을 만족할 때만 함수를 새로 만들 수 있다. useCallback 이란? React 공식 문서에 'useCallback은 dependencies(특정 조건)에 의해서만 바뀌는 memoized 된 콜백을 반환한다.' => 즉, dependencies가 바뀔 때만 함수가 새로 만들어진다. useCallback에 대한 더 자세한 설명은 아래의 공식 문서에서 확인 가능하다. https://reactjs.org/docs/hooks-reference.html#usecallback Hooks API..

렌더링을 최적화하기 위해서는 컴포넌트가 렌더링 되는 시점을 알아야 한다. 공식 문서에서 해당 내용을 찾아보고 싶었지만 아쉽게 찾지 못했고, 구글링을 통해 해답을 찾았다. React에서 컴포넌트가 리렌더링되는 시점은 크게 네 가지로 나뉜다. 1. 부모 컴포넌트가 리렌더링 될 때 2. props가 변할 때 3. state가 변할 때 4. forceUpdate가 호출될 때 위 네 가지 경우 중 1번은 불필요한 렌더링을 초래할 수 있다. 자세히 말하면 부모 컴포넌트에서 자식 컴포넌트로 전달되는 props에는 변화가 없는데, 부모 컴포넌트의 리렌더링으로 인해 자식 컴포넌트도 불필요하게 리렌더링 되는 경우다. 이런 경우를 방지하기 위한 방법으로는 자식 컴포넌트에 React.memo를 적용하는 것이다. React.m..

React Native에서 공식적으로 Animated api를 제공해줍니다. https://reactnative.dev/docs/0.63/animated 해당 기능은 1) 사용하기 쉽고 2) 공부할 자료가 많은 장점이 있습니다. 하지만 아래와 같은 단점이 존재합니다. 1) Reac Native에서 지원하고 있는 Animatd는 JS thread(Javascript Thread)에서 실행되며, 이는 JS thread가 바쁠 때 fps가 떨어지는 현상을 발생시킬 수 있다. 2) 위 현상을 해결하기 위해 useNativeDriver 옵션을 제공하지만 해당 옵셥을 적용할 수 있는 style 속성이 제한된다. - transform 또는 opacity style 속성에는 적용가능 하지만 layout 관련 속성(wi..

하나의 스크린에서 부가적인 기능 또는 정보를 제공하기 위해 아래와 같은 BottomSheet가 사용됩니다. React Native에서 사용할 수 있는 BottomSheet 라이브러리는 'react-native-reanimated-bottom-sheet'라는 라이브러리가 있습니다. https://github.com/osdnk/react-native-reanimated-bottom-sheet 위 라이브러리를 이용할 때 BottomSheet의 높이에 따라 background 색상을 변경시키는 설명은 아래 링크에 나와 있습니다. https://stackoverflow.com/questions/63701648/react-native-react-native-reanimated-bottom-sheet-how-can-..

Splash Screen이 적용된 React Native 앱을 Xcode를 통해 실제 ios 기기에 실행한 후 앱을 종료하고 다시 앱을 켜면 Splash 화면에서 앱이 10초가량 멈추고 종료되는 현상을 겪었습니다. 해당 문제에 대한 실마리는 Stack Overflow에서 얻을 수 있었습니다. https://stackoverflow.com/a/44835285 React native app stuck on splash screen on device but works in simulator My React Native app works in the XCode simulator with no issues, but when I run in a physical device, my iPhone, there's a p..

어제까지 잘 되던 Android build 과정에 오늘 갑자기 문제가 생겼다. 문제는 react-native-push-notification 라이브러리의 파일 import 부분에서 발생했다. 문제가 된 부분 'import com.google.firebase.iid.FirebaseInstanceId' not Found *문제를 처음 만났을 때 에러 부분을 캡쳐하지 못해 글로 적었습니다.😭 *문제가 된 파일 경로는 아래와 같습니다. node_modules/react-native-push-notification/android/src/main/java/com/dieam/reactnativepushnotification/modules/RNPushNotification.java 해결 방법 참고 해결 방법은 reac..

채팅, 댓글 기능이 들어간 앱에서는 일반적으로 아래와 같이 정보들은 위쪽에 입력창이 아래쪽에 배치되어 있는 화면을 갖게 됩니다. 이번 게시글에는 React-Native에서 위와 같은 스크린을 작업할 때 겪었던 'TextInput이 포커스 됐을 때 Keyboard가 올라오며 겹쳐지는 문제'에 대한 ios에서의 해결 방법을 적으려 합니다. 문제 상황 TextInput이 포커스 됐을 때 Keyboard가 올라오며 겹쳐진다. 해결 방안 KeyboardAvoidingView + 적절한 padding 값 조절 KeyboardAvoidingView는 React Native 공식 문서에서 지원하는 컴포넌트입니다. 해당 컴포넌트에 대한 공식 문서의 설명은 아래와 같습니다. It is a component to solve..

React Native api 통신을 하기 위해서 사용하는 대표적인 방법 중 하나가 Axios입니다! 프로젝트를 진행하면서 Android에서 Axios 이용 시 Network Error를 만난 적이 있는데요, 해당 에러를 만난 누군가에게 도움이 되기를 바라며 오늘은 이 에러를 해결하기 위해 참고한 자료들을 정리해 보려 합니다😊 ❗️react-native issue에서 참고한 자료 해당 문제에 대해서 많은 사람들이 이야기를 나눈 이슈 페이지 입니다! 이슈 링크: github.com/facebook/react-native/issues/28551 해당 이슈 페이지에서 참고할 만한 코멘트는 아래와 같습니다~ 참고할 만한 Comment 1: github.com/facebook/react-native/issues/..

[ 라이브러리 ] github.com/react-native-svg/react-native-svg react-native-svg/react-native-svg SVG library for React Native, React Native Web, and plain React web projects. - react-native-svg/react-native-svg github.com 프로젝트를 진행하다 보면 대부분의 경우 이미지 파일을 사용하게 됩니다. 간단한 아이콘의 경우 여러 이미지 확장자 중 svg를 사용하는 경우가 많은데 react-native에서는 추가 설정 없이는 로컬에 있는 svg 파일을 바로 불러올 수 없습니다:(. react-native에서 svg 이미지를 사용하기 위해 위 라이브러리를 사용..