개발 블로그

“왜 써야 하는지부터, 언제 쓰면 안 되는지까지”React Native를 하다 보면한 번쯤은 Animated를 마주치게 됩니다.공식 문서도 있고 예제도 많은데,막상 써보려고 하면 이런 생각이 먼저 듭니다.“이거… 왜 이렇게 어려워?”“useState로 opacity 바꾸면 되는 거 아냐?”“이걸 꼭 써야 해?”저도 처음엔 Animated가 괜히 복잡한 API 같았고,실제로 몇 번은 안 써도 될 곳에 억지로 쓰다가 코드만 더 꼬였던 적도 있습니다.이 글에서는리액트 개발자 기준에서 Animated를 왜 쓰는지, 언제 써야 하는지최대한 사람 말로 정리해보려고 합니다.Animated는 뭐 하는 놈인가?한 줄로 요약하면 이겁니다.“부드러운 애니메이션을 성능 저하 없이 처리하기 위한 도구”일반적인 리액트 상태 변경..

React Native에서 스크롤 중 Sticky Header를 만들었는데,버튼이 눌리지 않는 상황, 한 번쯤 겪으셨죠?저도 한참 삽질했습니다.화면에 분명히 버튼이 보이는데, 눌러도 반응이 없어요.“코드가 잘못됐나?” → “라이브러리 버그인가?”몇 시간 동안 고민한 끝에 원인을 찾았습니다.결론부터 말하면,Sticky Header 위에 다른 View가 겹치거나, 터치 이벤트를 막고 있는 경우가 대부분입니다.1️⃣ 문제 상황 정리FlatList / SectionList에 Sticky Header 적용버튼, 아이콘 등 터치 컴포넌트 정상 배치근데 눌러도 onPress 실행 안 됨iOS는 되는데 Android에서만 안 되는 경우 있음2️⃣ 원인 분석1. 다른 View가 위에 겹쳐 있음absolute 포지션 / ..

React Native에서 FlatList를 쓰다 보면스크롤은 되는데 터치가 안 되는 상황을 한 번쯤은 겪게 됩니다.아이템을 눌러도 onPress가 안 찍히고,“내 코드가 잘못된 건가?” 싶어서 한참을 들여다보게 되죠.저도 처음엔TouchableOpacity 문제인 줄 알았고,그다음엔 상태값 문제인 줄 알았습니다.근데 결론은 의외로 단순했습니다.ScrollView랑 FlatList가 겹쳐 있었어요.증상부터 정리해보면이런 상황이었습니다.FlatList는 잘 보임위아래 스크롤도 정상근데 아이템 클릭이 안 됨콘솔 로그도 안 찍힘특히 화면 끝까지 스크롤했을 때만 안 되는 경우도 있었고,iOS에서는 되는데 Android에서만 안 되는 경우도 있었습니다.이때 거의 대부분의 원인이ScrollView + FlatLis..

React Native expo 프로젝트에 구글 admob 광고를 넣는 방법을 정리해야겠다. 매번 만드는데 맨날 까먹어서 찾아본다. 1. expo 프로젝트 만들기 npx create-expo-app -t expo-template-blank-typescript . 타입스크립트 템플릿으로 나는 만들어준다. 2. 구글 애드몹 세팅 2-1. react-native-google-mobile-ads 설치 npm i react-native-google-mobile-ads 2-2. app.json 코드 추가 { ... "react-native-google-mobile-ads": { "android_app_id": "ca-app-pub-xxxxxxxxxxxxxxxxxxxx" } ... } 위에는 안드로이드일때이고, 아이..