chobyeonggyu03 님의 블로그

● 이번 글에서는 React Native의 기본 컴포넌트들과 간단히 style지정방법에 대해 정리해보고자 한다.  View 컴포넌트는  Javascript에서 태그와 비슷한 개념으로 다른 요소들을 감싸주는 컨테이너 역할을 하는 컴포넌트이다. 또한, 이름 그대로 화면에 View 컴포넌트는 안에 있는 요소들 보여주며, 주로 레이아웃을 구성하는데 많이 이용된다   View 컴포넌트의 특징컨테이너 역할 : View 컴포넌트는 다른 컴포넌트들을 감싸는 컨테이너 역할을 해줌 중첩 가능 : View 컴포넌트는 여러 개 중복되어 사용할 수 있음 레이아웃 구성의 편의성 :  View 컴포넌트는 Flexbox 레이아웃 시스템을 사용하여 내부 컴포넌트들의 정렬과 배치를 관리하므로 비교적 쉽게 레이아웃 디자인을 할 수 있음..

이번 글에서는 React Native에서 처음 프로젝트를 생성할 때 초기 파일 구조에 대해 정리해보고자 한다. 프로젝트 생성하기 VScode에 npx react-native init --version [버전] [파일멸] 을 입력하여 프로젝트 생성하기 -> 버전에 따라 어떤 버전은 Android SDK버전과 호환이 안될 수도 있고 자동으로 app.js가 포함된 파일들이 생성되지 않을 수도 있음 가장 좋은건 공식사이트에 들어가서 프로젝트 생성 코드를 그대로 치는 것--> npx @react-native-community/cli@latest init [파일명]      프로젝트를 정상적으로 만들었다면 위의 사진처럼 app.tsx나 app.js파일이 섞인 프로젝트가 생성되어 있어야 함(app.js와 app.ts..

이번글에서는 React Native을 본격적으로 공부하기에 앞서, React Native를 공부하는 데에 도움이 되는 기본 React 개념들에 대해 정리해보고자 한다.  State란?● State는 React 기본문법으로, 컴포넌트 내에서 렌더링 되는 데이터를 저장하고 관리하는 Javscript언어의 객체이다.   State의 특징캡슐화 : state는 일반적으로 해당 컴포넌트 내에서 관리되기에, 컴포넌트 외부에서 직접적으로 접근할 수 없어  캡슐화하여 렌더링 할 데이터를 관리하는데 유용하다. 데이터 유지 보수 및 관리 편의성 : state를 사용하게 되면 따로 렌더이할 데이터들을 객체로 묶어 관리할 수 있게 되며, 직접 텍스트를 하나하나 렌더링 하는 것보다 한번 필터링된 데이터를 선별적으로 출력하는 것..

앞서 말했듯이 React Native CLI를 사용하기 위해선 초기에 개발환경을 구축해야한다고 하였는데, 이번 글에서는 React Native CLI의 개발환경을 구축하는 방법에 대해서 정리 해보고자 한다.   1. Node.js 설치하기 React Native는 Javascript를 기반으로 하기에 Javascript 언어를 브라우저 외부화경에서 사용할 수 있게 런타임 환경을 세팅해주는 Node.js를 설치해줘야 한다. 또한, React Native를 통해 앱 개발 도중 필요한 패키지들이 있을 때 이를 쉽게 다운로드하거나 관리해주는 기능을 제공하는 npm (Node Package Manager)을 다운로드 해줘야하는데 다행히 npm은 node.js안에 내장되어 있기 때문에 node.js만 설치해주면 n..

React Native의 개발환경 프레임워크에는 React Native Comand Line Interface 와 React Native Expo Comand Line Interface 2가지가 있는데, 2가지 개발 프레임워크의 차이점은 무엇이 있는지 그 차이점에 대해 정리해보고자 한다. React Native CLI ● React Native의 공식 개발 프레임워크로 개발자가 네이티브 코드에 직접적으로 접근할 수 있음, 하지만 따로 초기 환경설정을 해줘야함 React Native CLI의 특징● 앱 개발을 위해선 초기 개발환경 세팅이 필수적임 ● Native code에 직접적으로 접근할 수 있음 ● 원하는 언어로 추가작성이 가능함 ( Java, Kotlen, swift, obj-C 등 ) ● 필요한 기..

이번 글에서는 React Native에 대해 공부하기 전 간략하게 React Native라는 언어가 어떤 언어이고, 어떤 특징을 가지는지에 대해 간단하게 정리하고 넘어가고자 한다. React Native란?● Web 기반 React 기술을 활용하여 iOS와 Android 모두에서 작동하는 모바일 앱을 개발할 수 있는 프레임워크이다. ● React와 동일하게 Javascript 언어를 기반으로 하며, 네이티브 플랫폼의 기능을 최대한 활용할 수 있도록 해주는 프레임워크이다. ● Facebook에 의해 2015년에 처음 출시된 프레임워크이다. (native platform이란 모바일 기기의 OS에 직접적으로 설계된 애플리케이션으로, 각 플랫폼의 고유 API와 직접적으로 상호 작용할 수 있어, 높은 성능과 우수..