[React.js] React와 CSS

React는 javascript로 이루어져 있으므로,

홈페이지를 꾸미기 위해서는 CSS엔진이 필요하다

 

Yoga - css엔진 (C++로 구현됨)

 

Yoga엔진은 기존의 css엔진과 비슷하나, 약간의 차이점이 존재한다.

기존엔진

justify-content : center

 

Yoga엔진

justifyContent : center

 

React Native에서 컴포넌트 꾸미기 (스타일링)

 

1. 뷰 컴포넌트

이름에 View가 들어간 컴포넌트는, backgroundColor 속성을 사용해 배경색을 지정할 수 있다.

 

2. 텍스트 컴포넌트

Text 컴포넌트는, color 속성을 사용해 글자색을 지정할 수 있지만, 배경색은 지정할 수 없다

 

인라인 스타일로 꾸미기

인라인 : 컴포넌트의 기본속성인 style을 이용해, 컴포넌트 안에 직접 스타일을 지정하는 것

<컴포넌트이름 style={{스타일 지정}}/>

 

StyleSheet API 이용해 꾸미기

StyleSheet API : React Native 에서 지원하는 API

많은 양의 스타일을 지정해야 할때 편리하다.
( 많은 양의 스타일을 인라인 방식으로 지정하면, 가독성이 좋지 않다 )

/* 
  StyleSheet API속의 create() 메소드 사용하기
  ( 캐시된 스타일 객체 생성 )
*/

StyleSheet.create({
  키1 : 스타일 객체,
  키2 : 스타일 객체,
  ...
})

1. StyleSheet.create() 메소드가 스타일 객체를 받아, Native 모듈로 전달
2. Native 모듈이 전달받은 객체를 캐시 형태로 저장 ( 로컬 저장소 )
3. Native 모듈이 렌더링할때, 저장된 스타일 객체를 참조

(  javascript 엔진 스레드와, Native UI 스레드 간의 통신이 일어나지 않음 - 속도 향상 )