React Native 원리, 화면을 만들어주는 방법 DEV / REACT NATIVE
2020-06-13 posted by sang12
크로스 플랫폼으로 개발이 가능한 ReactNative를 접하고 흥미를 느껴 화면이동도 시켜보고 버튼도 생성해보고 하던 중, 대체 이놈은 어떻게 안드로이드와 아이폰에서 네티이브한 화면을 만들어줄까? 라는 궁금증이 생겼다.
그래서 여러 사이트를 검색해보니, React의 흐름을 알아야한다고 한다. 하지만 난 React를 해본적이없어서 Vue를 했던 경험을 바탕으로 생각을 정리해보았다(비슷한 부분이 많으므로..).
일반적으로 Vue에서는 사용자가 작성한 html을 랜더링하여 가상돔을 만든다. 그리고 현재 그려진 돔과 가상돔을 비교하여, 다른 부분만 변경해줘서 화면을 빠르게 갱신해준다.
맞다. 내가 개발한 html 태그를 바탕으로 웹화면에 가상돔을 이용하여 화면을 그려 줬다. 근데.. 대체 안드로이드의 버튼이나, 글자들은 어떻게 그려주는 걸까?
검색해보니 내가 사용한 ReactNative작성된 문법을 랜더링 해서 리액트 컴포넌트 돔에 마운팅 한다고한다. 그리고, 브릿지라는 것을 통해서 안드로이드, 아이폰의 화면에 그려주는 api를 호출해서, 네이티브한 화면을 구성해준다고한다. (참고 : https://medium.com/@jang.wangsu/rn-react-native-%EC%8B%A4%ED%96%89-%ED%9D%90%EB%A6%84-workflow-%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EB%AF%BC%ED%95%B4%EB%B3%B4%EA%B8%B0-7d973372e4d4)
아.. 결국 그럼 브릿지라는것을 통해서 RN에서 매핑되는 소스의 네이티브 화면을 구성해주는 api를 호출하는 것이라고 이해하면 될까? 그럼 리액트 컴포넌트 돔에 마운팅 한다는것 또한 Vue에서 가상돔을 만들어 실제돔과 비교하여 틀린 부분만 교체해주는 방법과 유사하게, 네이티브의 화면을 가상화해서, 실제 변경되는 네티이브 화면만 변경해 주는 것이겠지.
하지만 브릿지에서 제공해주는 api에 따라 화면을 그려주는 부분이 제한적이지 않을까라는 생각이 문득 든다.
글의 제목은 원리 화면을 만들어주는 방법이라고 거창하게 적었는데 대부분이 추측이 난무하는 글이 되어버렸다 :(. 조금 더 공부해서 보완하도록 하자. 해당 내용은 추축이 난무하는 글이니 참고만 부탁드립니다..^^ 잘못된 부분은 댓글로 알려주세요.