mirabo01 님의 블로그

화면에 내용이 조금만 늘어나면바로 이런 상황을 마주친다.화면 아래가 잘려서 안 보인다리스트를 만들었는데 스크롤이 안 된다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..

요즘 모바일 앱을 만든다고 하면React Native를 한 번쯤은 반드시 듣게 된다.웹 개발을 조금이라도 해봤다면“JavaScript로 앱을 만든다”, “React로 모바일을 만든다”는 말이어느 정도는 감이 올 것이다.하지만 막상 시작하려고 하면 이런 생각이 든다.React랑 뭐가 다른 거지?웹이랑 앱은 완전히 다른 거 아니야?이걸로 실제 서비스가 가능한가?이 글은React Native를 처음 접하는 사람을 기준으로,개념부터 왜 쓰이는지까지 차분하게 정리한 글이다.이 글이 필요한 사람모바일 앱 개발을 처음 시작하려는 경우React는 해봤지만 React Native는 처음인 경우Flutter, Native와 비교하며 고민 중인 경우React Native란 무엇인가React Native는**JavaScrip..