mirabo01 님의 블로그

기본 컴포넌트(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..