처음 배우는 리액트 네이티브 : 4장 정리

1. 스타일링

---

리액트 네이티브에서의 스타일링은 CSS와 약간의 차이가 있다. 리액트 네이티브에서는 자바스크립트를 이용해 스타일링할 수 있다. 컴포넌트에는 style 속성이 있고, 이 속성에 인라인 스타일을 적용하는 방법과 StyleSheet에 정의된 스타일을 사용하는 방법이 있다.

1) 인라인 스타일링

HTML의 인라인 스타일링처럼 컴포넌트에 직접 스타일을 입력하는 방식. 단, 객체 형태로 입력해야 한다.

2) 클래스 스타일링

스타일시트에 정의된 스타일을 사용하는 방법.

3) 여러 개의 스타일 적용

여러 개의 스타일을 적용해야 할 때는 배열을 이용하여 style 속성에서 적용한다. 이때 뒤에 오는 스타일이 앞에 있는 스타일을 덮는다는 것에 주의해야 한다. 클래스 스타일뿐만 아니라 인라인 스타일을 혼용해서 사용해도 된다.

4) 외부 스타일 이용하기

외부 파일에 스타일을 정의하고 여러 다른 파일에서 공통으로 사용할 수도 있다.

 

 

2. 대표적인 속성들

---

1) flex와 범위

flex 속성을 이용하면 비율로 크기가 설정되어 다양한 기기에서 다르게 보이는 문제를 해결할 수 있다. 값이 0일 때에는 width, height 값에 따라 크기가 결정되고, 양수인 경우는 flex 값에 비례하여 크기가 조정된다.
+) justifyContent, alignItems 등 CSS에서 존재하는 속성들이 리엑트 네이티브에도 존재한다.

2) 그림자 (+ Platform 모듈)

shawdowColor, shadowOffset 등 그림자와 관련한 스타일 속성은 iOS에만 적용이 가능하고, 안드로이드에서는 elevation 속성을 사용해야 한다.이렇게 각 플랫폼마다 적용 여부가 다른 속성을 사용해야 할 때 Platform 모듈을 이용하면 어떤 플랫폼에서 적용되는지, 코드의 역할이 무엇인지 한눈에 알 수 있다.

 

 

3. 스타일드 컴포넌트

---

스타일드 컴포넌트는 자바스크립트 파일 안에 스타일을 작성하는 CSS-in-JS 라이브러리이며, 스타일이 적용된 컴포넌트라고 생각하면 된다. 스타일드 컴포넌트를 사용하면 컴포넌트에 역할에 맞는 고유한 이름을 지정할 수 있다는 장점이 있다.

• 태그드 템플릿 리터럴(Tagged Template Literals) : 스타일드 컴포넌트를 이용하는 형식. styled.[컴포넌트 이름] 뒤에 백틱을 붙이고 그 안에 스타일을 지정한다.
• ThemeProvider : 스타일드 컴포넌트를 이용할 때 미리 정의한 값들을 사용할 수 있도록 props로 전달한다.