[React/TypeScript] 처음 배우는 리액트

리액트 네이티브 : 페이스북(현 메타) 에서 개발한 오픈 소스 모바일 애플리케이션 프레임 워크 

 

동작 원리 : 직렬화, 비동기, 일괄처리 브리지를 통해 네이티브 플랫폼과 통신하며 종단 장치에 직접 백그라운드 프로세스로 실행. 

 

여기에 대한 내용을 설명하자면 네이티브(IOS ,Android) 에 통신할 수 있는 중간 단계의 프로그램이 있어 직렬화(플랫폼과 빨리 통신하기위한 데이터 형태), 비동기(통신 방법), 일괄처리 브리지(받은 데이터 처리 방법)등을 할 수 있도록 하는 개발 툴

 

1. 엔트리 파일

 - index.js 파일이며 생성한 리액트 네이티브 앱은 이 파일에서 시작! import 구문을 통해 코드를 불러오고 앱을 번들링할 수 있음. [C#으로 치면 using 문] 

 index.js 맨 아래를 보면 AppRegistry.registerComponent(appName, ()=>App); 라는 함수를 사용해서 네이티브 시스템에 해당 컴포넌트를 등록함. 이게 있어야 네이티브 시스템에서 리액트 네이티브 컴포넌트를 화면에 보여줄 수 있음.

 

2. App.js [App.tsx]

 - 기본적으로 생성되는 메인 클래스라고 생각하면 된다.  export default App 이라는 구문을 통해 화면을 출력.

 

3.  ESlint , Prettier

 - 리액트 개발자를 통해 알았다. C# 개발자는 아무고토 몰랐다.. 비주얼 스튜디오에서 해주는 것들을 모두 알아서 설정해줘야한다는걸.. 자바스크립트, 타입스크립트 등 개발자 취향에 따라 다르게 사용하는 코드 규칙들을 일관성있게 작성하게 해주는 ESlint와 들여쓰기, 세미콜론 따옴표 규칙을 정리해주는 Prettier 를 비주얼코드에서 설치해주는것이 좋다. 비주얼 코드 확장에서 검색하면 설치 가능하다.