React Native
-
React Native 새로운 아키텍처React Native 2021. 1. 18. 22:36
@@@@@ 이미지들은 모두 아래에 참고한 링크에서 따온 것들이다. JavaScript에서의 실행흐름을 알고난 뒤로 문득 React Native에서도 실행흐름이 궁금해져서 자료를 찾고 있었다. 흔히 이런 그림이 있는데, JavaScript 스레드에서는 네이티브에 직접적으로 통신할 수가 없어서 UI를 그려주려면 브릿지를 통해 Shadow Thread라는 곳에 전달을 해준다. Shadow 스레드는 자바스크립트 스레드 -> 브릿지로 전달받은 데이터를 통해 레이아웃을 계산해준다. 메인스레드는 Shaodw 스레드에서 계산된 레이아웃을 기반으로 UI를 그려준다. 네이티브 코드도 여기서 실행한다. 서로 통신하는 과정에서 JSON으로 직렬화해서 데이터를 주고받는다고 하는데, 벌써 2~3번이 일어난 것이다. 다시 자바스크..
-
React Native Android APIReact Native 2021. 1. 2. 22:47
@ React Native 0.63 버전을 기준으로 작성되었습니다. @ 최대한 쉽게 이해할 수 있도록 작성하고자 노력했습니다. @ 편의상 세미콜론(;)은 생략합니다. 마침표도 생략될 수 있습니다. React Native에는 어떤 안드로이드 API가 있는지 알아보자 공통적으로 적용되는 API는 다음에 추가해보겠다. @ API가 무엇인지 모르거나 헷갈려하는 사람들을 위해 API는 흔히 Application Programming Interface(응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스) 라고 설명하는데 처음 접하는 사람들은 이게 무슨 말이야? 한다. 나도 처음에 그랬으니까... 바꿔말하면 'RN이 제공하는 기능'이라고 보면 될 것 같..
-
React Native ComponentReact Native 2021. 1. 2. 12:13
@ React Native 0.63 버전을 기반으로 작성했습니다. @ 모바일 플랫폼은 Android만 언급합니다. @ 최대한 쉽게 이해할 수 있도록 작성하려 노력했고 React 코드도 작성했습니다. @ 공식문서와 함께 보면 더 좋습니다. @ 0.63미만의 버전은 이 글과 내용이 다소 다를 수 있으니 참고해주세요. @ 편의상 세미콜론은 생략합니다. @ 오타가 있다면 알려주세요! 리액트 네이티브는 리액트와 비교해서 무엇이 다를까? React React Native 공통점 hook공유, React 기반의 앱, 라이프사이클, Fragment 사용가능 등 차이점 react-dom을 이용하여 dom을 구성 웹에서만 동작하는 HTML 태그 사용 react-native를 이용하여 구조를 만듬 다양한 환경에서 동작해야 ..