728x90 React Native/이론16 [ReactNative] 리액트 네이티브 컴포넌트 만들기 (뷰 작업, JSX 사용, 네이티브 컴포넌트 스타일링) 모든 리액트의 코드는 리액트 컴포넌트 안에 존재합니다. 리액트 네이티브 컴포넌트는 일반적인 리액트 컴포넌트와 대부분 비슷하지만 렌더링과 스타일 적용 방법에서 큰 차이가 있습니다. 뷰 작업하기 리액트를 이용해서 웹 페이지를 만들 떄는 일반적인 HTML요소 (, , 등)를 사용하여 렌더링 합니다. 리액트 네이티브는 이러한 요소 대신에 플랫폼에 종속적인 리액트 컴포넌트를 사용합니다. 리액트 리액트 네이티브 , , 자식 아이템 가장 기본적인 컴포넌트는 크로스 플랫폼 인데, 단순하고 유연한 UI 요소로 와 유사합니다. 컴포넌트는 iOS에서는 UIView로 렌터링되고 안드로이드에서는 VIEW로 렌더링 됩니다. 다른 컴포넌트들은 특정 플랫폼에서만 동작합니다. 예를 들어 는 iOS의 표준 날짜 선택기를 렌더링합니다. .. 2021. 8. 30. [React Native] 리액트 네이티브 동작 원리(DOM, bridge, 렌더링 라이프 사이클 ) 기술적인 측면에서 리액트 네이티브의 동작 원리를 이해하려면 먼저 리액트의 특징 중 하나인 가상(Virtual) DOM에 대해 알아야 합니다. 리액트에서 가상 DOM은 '화면이 어떤 모습이어야 하는지 개발자가 작성한 내용과 실제 화면에 렌더링되는 것 사이에 존재하는 레이어'에 해당됩니다. 브라우저에서 상호작용하는 사용자 인터페이스를 렌더링하기 위해서 개발자는 반드시 브라우저의 DOM(Document Object Model)을 수정해야합니다. 하지만 과도한 DOM 수정은 심각한 성능 저하를 유발합니다. 리액트는 페이지의 변화를 바로 렌더링하지 않고 먼저 메모리에 존재하는 가상 DOM에서 변화가 필요한 곳을 계산하고 필요한 최소한의 변경사항만 렌더링 합니다. state 변경 -> 차이점 계산 -> 다시 렌더링.. 2021. 8. 24. [React Native] 리액트 네이티브란? 개념과 특징, 장단점 ! 리액트 네이티브란?! 리액트 네이브는 'iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크'입니다. 리액트 네이티브는 사용자 인터페이스를 만드는 페이스북의 자바스크립트 라이브러리인 리액트에 기반을 두고 있는데, 브라우저가 아닌 모바일 플랫폼이 타깃입니다. 즉, 웹 개발자가 익숙한 자바스크립트 라이브러리를 이용하면서 겉모습과 실제 동작까지 진짜 네이티브인 모바일 앱을 만들 수 있습니다. 게다가 작성한 코드 대부분을 플랫폼 간에 공유할 수 있어서 리액트 네이티브를 이용하면 iOS와 안드로이드 앱을 동시에 개발할 수 있습니다! 공식 리액트 네이티브 프로젝트는 iOS와 안드로이드에서 모두 동작하는 모바일 앱을 작성할 수 있게 해 주는데, 커뮤니티 프로젝트를 이용하면 리액트 네이티.. 2021. 8. 19. [React Native] 리액트 네이티브 VSCode 환경 설정 및 사용법 #4 비주얼 스튜디오 코드(이하 VSCode)는 자바, 파이썬, PHP 등 다양한 프로그래밍 언어를 지원하는 만능 편집기입니다! 따라서 VSCode에서 타입 스크립트로 리액트 네이티브 프로젝트를 개발하려면 그에 맞는 환경설정과 사용법에 대한 이해가 필요합니다. Windows와 Mac 설정 동일합니다! 한국어 언어 팩 설치 Scoop으로 설치한 VSCode는 기본으로 영문 버전인데, 이를 한국어로 바꾸려면 언어 팩을 설치해야 합니다. VSCode 왼쪽 아이콘 바에서 [Extension]을 누르거나 [View ->Extension] 메뉴를 실행시킵니다. 그런 다음 'Korean'을 검색해 다운로드하여 주시면 됩니다! 타입 스크립트 설치 VSCode는 Windows PowerShell(윈도우 파워 셸) 같은 터미널.. 2021. 8. 12. [React Native] 리액트 네이티브 윈도우 개발환경 갖추기 #2 윈도우에서 개발환경을 갖추기 위해 Scoop와 Node.js, Java8 JDK, VSCode를 설치해 보겠습니다! Scoop 설치 Scoop 프로그램 설치는 관리자 모드로 실행한 윈도우 파워 셸에서 진행합니다. 파워 셸에서 Scoop을 설치하려면 다음 명령을 실행합니다. >>> Set-ExecutionPolicy RemoteSigned -scope CurrentUser 명령을 실행한 후 '모두 예'를 의미하는 A를 입력합니다. 그 후 'SCOOP'이라는 이름의 파워 셸 환경 변수를 다음처럼 설정합니다. >>> $env:SCOOP='C:\Scoop' 그러면 앞으로 Scoop으로 설치한 모든 프로그램은 C:\Scoop 디렉터리에 위치합니다. 하지만 이 환경변수 설정은 파워셸에서 Scoop으로 프로그램을 설.. 2021. 8. 11. [React Native] 리액트 네이티브 앱 프로그래밍 시작하기 #1 안녕하세요! 앱 개발을 시작하기 전에 #리액트네이티브 프레임워크를 소개해보도록 하겠습니다~ #리액트 프레임워크는 2013년에 페이스북에서 발표한 오픈소스 자바스크립트 프레임워크입니다. 리액트는 가상 DOM(virtual DOM)과 JSM(javascript XML)라는 새로운 방식으로 동작하는 프레임 워크로 많은 사람들이 프런트엔드 웹을 개발할 때 사용하고 있습니다. #네이티브(native)라는 단어는 '운영체제를 만들 때 사용한 프로그래밍 언어와 똑같은 언어로 만든’이란 의미입니다. 그리고 네이티브 앱은 모바일 운영체제 (안드로이드 - 자바, iOS - 오브젝티브-C)로 만든 앱을 네이티브 앱이라고 합니다. 네이티브 앱은 실행 속도가 빠른 장점이 있지만 습득해야 할 지식이 많고, 똑같은 기능을 안드로이.. 2021. 8. 11. 이전 1 2 다음 728x90
