React와 React native의 CSS 차이점

• id, class 등의 선택자 사용방식이 아닌 StyleSheet.create 메소드 활용
• 스타일 속성을 지정할 때 ;가 아닌 , 사용
• 스타일 속성명은 - 대신 CamelCase
• React Native에서는 축약형을 사용하지 않기 때문에 margin이나 padding을 사방으로 줄 수 없음. 그 대신 marginVertical, paddingHorizontal 등의 상하, 좌우 값을 한번에 적용할 수 있는 속성 존재
• 스타일 우선순위 차이 → 기존 CSS는 우선 순위 규칙에 따라 스타일이 나중에 선언된 값이 지정되는 반면, React native은 그것과 관계없이 나중에 전달하는 스타일이 항상 우선순위가 됨
• React Native에서는 가상 클래스 등을 사용할 수 없음
• React Native의 flex
  • css와는 다르게 flexDirection의 기본값이 column
• Button
  • color 외 스타일링이 어려움 따라서 ios : 텍스트color, 안드로이드는 버튼의 배경색이 변경 됨
  • TouchableHightlight, TouchableOpacity, TouchableNativeFeedback(안드로이드만 가능)으로 대체 할 수 있음
• style속성은 스타일 객체로 구성된 배열로 지정할 수 있음
• Text 태그는 html의 p태그와 유사함 모든 텍스트는 Text 태그 안에 작성 되어야 하며 그렇지 않으면 에러가 발생함
• float 속성을 지원하지 않음

Category	Properties	Description	Value or Type
Display & Overflow	display		flex | none
	overflow		visible | hidden | scroll
	backfaceVisibility		visible | hidden
Position	position		absolute | relative
	top		number(point), string(%)
	right		number(point), string(%)
	bottom		number(point), string(%)
	left		number(point), string(%)
	start	Relative direction	number(point), string(%)
	end	Relative direction	number(point), string(%)
	zIndex		number
Flexible Box	flex		number
	flexBasis		number, string
	flexDirection		row | row-reverse | column | column-reverse
	flexGrow		number
	flexShrink		number
	flexWrap		wrap | nowrap
	justifyContent		flex-start | flex-end | center | space-between | space-around | space-evenly
	alignContent		flex-start | flex-end | center | stretch | space-between | space-around
	alignItems		flex-start | flex-end | center | stretch | baseline
	alignSelf		auto | flex-start | flex-end | center | stretch | baseline
Size	width		number(point), string(%)
	height		number(point), string(%)
	maxWidth		number(point), string(%)
	maxHeight		number(point), string(%)
	minWidth		number(point), string(%)
	minHeight		number(point), string(%)
Margin	margin		number(point), string(%)
	marginTop		number(point), string(%)
	marginRight		number(point), string(%)
	marginBottom		number(point), string(%)
	marginLeft		number(point), string(%)
	marginStart	Relative direction	number(point), string(%)
	marginEnd	Relative direction	number(point), string(%)
	marginHorizontal	Both left & right	number(point), string(%)
	marginVertical	Both top & bottom	number(point), string(%)
Padding	padding		number(point), string(%)
	paddingTop		number(point), string(%)
	paddingBottom		number(point), string(%)
	paddingRight		number(point), string(%)
	paddingLeft		number(point), string(%)
	paddingStart	Relative direction	number(point), string(%)
	paddingEnd	Relative direction	number(point), string(%)
	paddingHorizontal	Both left & right	number(point), string(%)
	paddingVertical	Both top & bottom	number(point), string(%)
Border	borderWidth		number
	borderStyle		solid | dotted | dashed
	borderColor		rgb(a) | hsl(a) | transparent | named colors
	borderRadius		number
	borderTopWidth		number
	borderTopColor		rgb(a) | hsl(a) | transparent | named colors
	borderRightWidth		number
	borderRightColor		rgb(a) | hsl(a) | transparent | named colors
	borderBottomWidth		number
	borderBottomColor		rgb(a) | hsl(a) | transparent | named colors
	borderLeftWidth		number
	borderLeftColor		rgb(a) | hsl(a) | transparent | named colors
	borderStartWidth	Relative direction	number
	borderStartColor	Relative direction	rgb(a) | hsl(a) | transparent | named colors
	borderEndWidth	Relative direction	number
	borderEndColor	Relative direction	rgb(a) | hsl(a) | transparent | named colors
	borderTopStartRadius	Relative direction	number
	borderTopEndRadius	Relative direction	number
	borderTopLeftRadius		number
	borderTopRightRadius		number
	borderBottomStartRadius	Relative direction	number
	borderBottomEndRadius	Relative direction	number
	borderBottomLeftRadius		number
	borderBottomRightRadius		number
Background	backgroundColor		rgb(a) | hsl(a) | transparent | named colors
Opacity	opacity		number
Text	fontFamily		string
	fontSize		number
	fontStyle		normal | italic
	fontVariant	iOS only, Array of string	['small-caps'] | ['oldstyle-nums'] | ['lining-nums'] | ['tabular-nums'] | ['proportional-nums']
	fontWeight		normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
	color		rgb(a) | hsl(a) | transparent | named colors
	letterSpacing	iOS only	number
	lineHeight		number
	textAlign		auto | left | right | center | justify(iOS only)
	textAlignVertical	Android only	auto | top | bottom | center
	textDecorationLine		none | underline | line-through | underline line-through
	textDecorationColor	iOS only	rgb(a) | hsl(a) | transparent | named colors
	textDecorationStyle	iOS only	solid | double | dotted | dashed
	textShadowRadius		number
	textShadowOffset	Object	{   width: number,   height: number }
	textShadowColor		rgb(a) | hsl(a) | transparent | named colors
	textTransform	iOS only	none | uppercase | lowercase | capitalize
	includeFontPadding	Android only	bool
	writingDirection	iOS only	auto | ltr | rtl
Shadow	shadowColor		rgb(a) | hsl(a) | transparent | named colors
	shadowOffset	Object	{   width: number,   height: number }
	shadowOpacity		number
	shadowRadius		number
Transform	transform	Array of object	[   {perspective: number},   {rotate: string(deg)},   {rotateX: string(deg)},   {rotateY: string(deg)},   {rotateZ: string(deg)},   {scale: number},   {scaleX: number},   {scaleY: number},   {translateX: number},   {translateY: number},   {skewX: string(deg)},   {skewY: string(deg)} ]
	transformMatrix		TransformMatrixPropType
	decomposedMatrix		DecomposedMatrixPropType
	rotation		deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.')
	scaleX		deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.')
	scaleY		deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.')
	translateX		deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.')
	translateY		deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.')
Derection	direction		inherit | ltr | rtl
ETC.	elevation	Android only(5.0+)	number
	aspectRatio		number
	resizeMode		Object.keys(ImageResizeMode)
	tintColor		rgb(a) | hsl(a) | transparent | named colors
	overlayColor	Android only	string

 

 

*참고자료

https://blog.logrocket.com/styling-in-react-4-ways-style-react-app/

https://wit.nts-corp.com/2020/03/23/6014