728x90 렌더링3 [React Native] 리액트 네이티브 DOM과 렌더링 - 물리 DOM, 가상 DOM, 차이점, react 패키지 역할, 브릿지 방식 렌더링 리액트 네이티브 DOM과 렌더링 DHTML 방식은 자바스크립트가 Hello world와 같은 텍스트를 만드는 것이 아니라 객체 지향 언어의 상속 관계로 설계한 문서 객체 모델(Document Object Model, DOM)타입 자바스크립트 객체를 생성하는 방식으로 동작한다. 웹 브라우저는 정적 HTML 문서를 만나면 파싱(parsing) 과정을 거쳐 웹 브라우저 개발 도구 창(F12)에서 본 DOM 트리 같은 형태의 자바스크립트 객체 구조를 만든다. 웹 브라우저는 , 과 같은 HTML 형태로 보여주지만 자바스크립트 코드 관점에서 는 HTMLDivElement 클래스의 인스턴스(instance)이고, 은 HTMLHeadingElement클래스의 인스턴스이다. HTMLDivElement, HTMLHeadi.. 2021. 9. 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. 이전 1 다음 728x90
