웹 개발의 방대한 환경에서 React.js는 사용자 인터페이스 구축 방식을 혁신하는 중추적인 기술로 부상했습니다. 이제 막 웹 개발을 시작했거나 기술을 확장하려는 경우, 최신 웹 개발에서 React.js를 이해하는 것은 매우 중요합니다. React.js가 무엇인지, 그 목적은 무엇인지, 어디서 효과적으로 배울 수 있는지 자세히 알아보세요. React.js란 무엇인가요?흔히 React라고 부르는 React.js는 Facebook에서 만든 오픈소스 자바스크립트 라이브러리입니다. 단일 페이지 애플리케이션의 사용자 인터페이스(UI)를 구축하기 위해 특별히 설계되었습니다. React의 차별점은 UI 컴포넌트 렌더링에 대한 선언적 접근 방식입니다. 개발자는 DOM을 직접 조작하는 대신 React를 사용하여 자체 상..

React Native 란 리액트는 페이스북이 웹 개발을 쉽게 하기 위해 만든 기술입니다. 리액트 네이티브는 리액트의 접근 방법을 모바일로 확장하는 페이스북의 오픈소스 프로젝트입니다. 기존의 하이브리드 앱은 WebView에 화면을 만들어 놓고 모바일 앱에서 접근하는 것이었기 때문에 퍼포먼스가 떨어지고, 모바일 앱과의 괴리감이 있었습니다. 리액트 네이티브는 실제 네이티브 UI를 사용하여 모바일 앱을 구현합니다. 퍼포먼스는 올라가고 괴리감도 사라지게 됩니다. 리액트 네이티브를 사용하면 JavaScript를 사용하여 모바일 앱을 제작할 수 있습니다. 리액트와 동일한 디자인을 사용하여 선언적 구성 요소에서 풍부한 모바일 UI를 구성할 수 있습니다. 장점 높은 생산성 리액트를 사용하여 개발해 보신분이라면 처음부터..

Expo 리액트 네이티브는 리액트 아키텍처를 모바일에 적용한 것으로, ES6 문법과 리액트를 이용해 모바일 애플리케이션을 개발할 수 있도록 해주는 프레임워크입니다. 리액트 네이티브 프로젝트 생성 시 react-native init 을 입력하여 사용하였습니다. 이것만으로도 충분하다고 느껴졌는데 다른 강좌를 보던 중에 Expo 툴을 발견하게 되었습니다. Expo는 리액트 네이티브 애플리케이션의 빌드를 돕는 툴입니다. 네이티브 API에 접근하는 것도 쉽게 만들어주고, 안드로이드와 iOS 버전을 알아서 빌드해 줍니다. 무엇보다 코드를 수정하면 바로 hot reloading 시켜주는 것이 가장 편합니다. 작년 12월 쯤에 리액트 네이티브를 알게 되고 최근에 Expo도 접하게 되면서 찾던 중 처음에는 Expo Xd..

Live Reload 리액트 네이티브 기반으로 안드로이드 앱 개발을 할 때 자동으로 리로드 되게 하려면 어떻게 해야 할까. 리액트 기반으로 웹 개발을 할 때에는 코드를 수정 시 자동으로 리로드 되었는데 리액트 네이티브로 개발할 때에 자동으로 되지 않아 검색하던 중 아래 내용처럼 옵션 설정을 하니까 잘 동작하였다. 명령 프롬프트에서 다음을 입력하여 장치 또는 에뮬레이터에서 앱을 설치하고 실행한다. $ react-native run-android 에뮬레이터를 클릭하고 CTRL + M ( MacOS의 경우 CMD + M )을 누르거나 실행 중인 응용 프로그램이 있는 Android 장치를 흔들면 된다. 팝업 메뉴에서 Enable Live Reload 옵션을 선택한다.