[react-native] yoga 엔진이란?

리액트 네이티브는 웹 브라우저에서 단순히 자바스크립트 엔진만 떼어낸 것이다.

그래서 HTML은 물론이고 CSS 엔진또한 존재하지 않는다.

 

그래서 리액트 네이티브는 Yoga라는 이름의 CSS엔진을 직접만들었다 ㅎㄸ

Yoga 엔진은 페이스북이 컴포넌트의 배치와 스타일링을 위해서 C++언어로 구현한 라이브러리이다.

Yoga엔진ㅇ느 웹 브라우저의 CSS엔진과 비슷하게 동작하지만 완전히 똑같지는 않다.

(특히나 flexbox layout 부분에 차이가있음.)

 

div같은 html요소에는 style이라는 속성이 있듯이,

RN 컴포넌트의 style 속성에 스타일값을 할당하면, 네이티브 모듈쪽에서 yoga엔진이 AOS,IOS의 UIKit 프레임워크가 요구하는 스타일링을 수행하게 된다.