mirabo01 님의 블로그

리스트 화면은React Native 앱에서 가장 흔하면서도가장 쉽게 느려지는 부분이다.처음엔 잘 동작하다가데이터가 조금만 늘어나면 이런 증상이 나온다.스크롤이 끊긴다이미지 로딩이 버벅인다입력할 때 리스트 전체가 다시 그려진다이 글에서는FlatList를 쓸 때 실무에서 꼭 챙기는 성능 포인트를옵션 중심으로 정리한다.이 글이 필요한 사람FlatList 스크롤이 부드럽지 않은 경우리스트 아이템이 많아질 예정인 경우성능 최적화를 어디서부터 해야 할지 모르는 경우FlatList가 기본적으로 빠른 이유FlatList는보이는 영역 위주로만 렌더링한다.화면에 안 보이는 아이템은 렌더링하지 않음스크롤 위치에 따라 동적으로 생성/제거그래서ScrollView보다 기본 성능은 훨씬 좋다.하지만설정을 안 하면 반쪽짜리 성능이 ..

API 연동까지 했다면이제 이런 고민이 자연스럽게 생긴다.로그인 정보는 어디에 두지?여러 화면에서 같은 데이터를 써야 하는데?props를 계속 내려야 하나?이 시점이 바로상태 관리가 필요해지는 순간이다.이 글에서는상태 관리 라이브러리를 바로 쓰기 전에,React Native에서 useContext로 어디까지 가능한지를실무 기준으로 정리한다.이 글이 필요한 사람props drilling이 불편해지기 시작한 경우전역 상태가 왜 필요한지 감이 안 오는 경우Redux 같은 라이브러리가 부담스러운 경우상태(state)는 왜 문제가 될까지금까지는대부분 이런 구조였을 것이다.화면 안에서만 쓰는 state컴포넌트 하나에서 관리하지만 앱이 커지면상태가 여러 화면에 걸쳐 필요해진다.예를 들면,로그인 사용자 정보토큰다크모드..

네비게이션까지 만들었다면이제 앱의 형태는 거의 갖춰졌다.다음 단계는“실제 데이터”를 붙이는 것이다.서버에서 목록 가져오기상세 정보 요청로딩 처리에러 처리React Native에서 API 연동은웹과 크게 다르지 않지만,처음에는 몇 가지 포인트에서 헷갈린다.이 글에서는fetch와 axios를 기준으로 API 연동의 기본 흐름을입문자 + 실무 기준으로 정리한다.이 글이 필요한 사람서버 데이터를 화면에 띄우고 싶은 경우fetch와 axios 중 뭘 써야 할지 고민되는 경우API 호출 위치와 타이밍이 헷갈리는 경우React Native에서 API 연동 흐름전체 흐름을 먼저 보면 이렇다.화면 진입API 요청로딩 상태 표시데이터 성공/실패 처리화면 렌더링이 흐름은React Native든 웹이든 거의 동일하다.[이미지..

Stack Navigation으로화면 이동까지 구현했다면이제 앱 구조가 조금 보이기 시작한다.하지만 실제 앱을 떠올려보면대부분 이런 형태다.하단에 탭이 있고홈 / 검색 / 설정 같은 화면이 고정되어 있음화면을 왔다 갔다 해도 탭은 유지됨이 구조를 만드는 게**Tab Navigation(탭 네비게이션)**이다.이번 글에서는react-navigation 기반 하단 탭 구조를 처음부터입문자 기준으로 정리한다.이 글이 필요한 사람하단 탭이 있는 앱 구조를 만들고 싶은 경우Stack과 Tab을 어떻게 같이 써야 할지 헷갈리는 경우실제 앱 같은 구조로 확장하고 싶은 경우Tab Navigation이 필요한 이유Stack Navigation만 쓰면화면이 계속 쌓이는 구조가 된다.홈 → 상세 → 설정 → 다시 홈이런 흐..

입력과 버튼까지 다뤘다면이제 앱다운 앱을 만들기 위한 마지막 기본 퍼즐이 남는다.바로 화면 전환이다.로그인 화면 → 홈 화면목록 화면 → 상세 화면뒤로 가기 처리React Native에는화면 전환이 기본으로 제공되지 않는다.그래서 대부분의 앱에서react-navigation 라이브러리를 사용한다.이 글에서는react-navigation을 처음 쓰는 사람 기준으로개념부터 가장 기본적인 사용법까지 정리한다.이 글이 필요한 사람화면이 하나짜리 앱에서 다음 단계로 가고 싶은 경우페이지 이동 개념이 아직 헷갈리는 경우react-navigation이 왜 필요한지 궁금한 경우React Native에 네비게이션이 없는 이유웹에서는 이런 흐름이 익숙하다.URL 변경페이지 이동뒤로 가기하지만 React Native 앱은단..

화면에 내용이 조금만 늘어나면바로 이런 상황을 마주친다.화면 아래가 잘려서 안 보인다리스트를 만들었는데 스크롤이 안 된다ScrollView로 했더니 느려진다React Native에서스크롤은 기본이 아니다.명시적으로 컴포넌트를 선택해야 한다.이 글에서는ScrollView와 FlatList의 차이와 사용 기준을실무에서 헷갈리지 않게 정리한다.이 글이 필요한 사람화면이 길어졌는데 스크롤이 안 되는 경우ScrollView와 FlatList 차이를 잘 모르는 경우리스트 성능 이슈가 걱정되는 경우React Native에서 스크롤이 필요한 이유React Native의 View는스크롤 기능이 없다.콘텐츠가 화면을 넘어가면그냥 잘린다.그래서 스크롤이 필요한 화면에서는반드시 전용 컴포넌트를 사용해야 한다.ScrollVie..

기본 컴포넌트(View, Text, Image)를 써서화면에 뭔가 띄우는 데까지는 금방 온다.그다음부터 막히는 지점은 거의 항상 같다.왜 가운데 정렬이 안 되지?웹처럼 margin: auto가 안 먹히네?가로 정렬은 했는데 세로가 이상하다이건 React Native가웹이 아니라 Flexbox 기반 레이아웃이기 때문이다.이 글에서는React Native 스타일링의 핵심인StyleSheet와 Flexbox 개념을 입문자 기준으로 정리한다.이 글이 필요한 사람React Native에서 레이아웃이 자꾸 어긋나는 경우Flexbox 개념이 아직 헷갈리는 경우웹 CSS 감각으로 접근했다가 막힌 경우React Native 스타일링 기본 개념React Native에서는CSS 파일을 따로 쓰지 않는다.대신 JavaScri..

Expo 프로젝트 구조를 한 번 훑어봤다면이제 진짜로 화면을 만드는 단계로 들어간다.React Native에서 화면은컴포넌트 조합으로 만들어진다.처음엔 태그 이름이 낯설어서 헷갈리지만,몇 개만 정확히 이해해두면이후 UI 작성이 훨씬 수월해진다.이 글에서는가장 기본이 되는 컴포넌트 3가지를실무 기준으로 정리한다.이 글이 필요한 사람React Native 화면 코드가 아직 낯선 경우와 역할이 헷갈리는 경우웹의 처럼 생각해도 되는지 궁금한 경우React Native 컴포넌트의 기본 개념React Native에는HTML 태그가 없다.대신,모바일 네이티브 UI에 대응되는 컴포넌트를 사용한다.웹처럼 보이지만실제로는 iOS / Android 네이티브 컴포넌트다.[이미지: React Native 컴포넌트와 네이티브 ..

Expo로 프로젝트를 생성하고 나면생각보다 많은 파일이 한꺼번에 생긴다.이 파일들… 다 써야 하나?App.js만 보면 되는 거 아냐?건드리면 안 되는 건 뭐지?처음엔 구조를 정확히 이해하지 않아도앱은 실행된다.하지만 폴더 역할을 모르고 시작하면조금만 커져도 금방 헷갈린다.이 글에서는Expo 프로젝트를 처음 열었을 때 꼭 알아야 할 구조만실무 기준으로 정리한다.이 글이 필요한 사람Expo로 React Native 프로젝트를 처음 만든 경우App.js 외에 뭐가 뭔지 헷갈리는 경우나중에 구조를 어떻게 나눠야 할지 감이 안 오는 경우Expo 기본 프로젝트 구조 전체 보기Expo 기본 템플릿을 생성하면대략 이런 구조를 보게 된다.my-app├─ App.js├─ app.json├─ package.json├─ as..

React Native를 시작하려고 하면가장 먼저 마주치는 선택지가 있다.Expo로 시작할 것인가,React Native CLI로 시작할 것인가.공식 문서를 봐도 둘 다 가능하다고 하고,검색해보면 의견도 제각각이다.이 글은React Native를 처음 시작하는 사람 기준으로Expo와 CLI의 차이를 정리하고,어떤 선택이 현실적인지 설명한다.이 글이 필요한 사람React Native를 이제 막 시작한 경우Expo와 CLI 차이로 고민 중인 경우“실무에서는 뭘 쓰는지” 감이 안 오는 경우전체 흐름 먼저 정리React Native 개발 환경은크게 두 가지 방식으로 나뉜다.Expo 기반 개발React Native CLI 기반 개발둘은 프로젝트 생성 방식부터 개발 경험까지 다르다.[이미지: Expo vs Reac..