[React-Native] StyleSheet CSS와의 주요 차이점.

CSS는 문서를 표기하는 방법을 지정하는 것입니다.  간단히 말하면 어떤 장식, 어떤 색깔, 어떤 크기등을 지정하는 언어입니다. 

 

작성법의 경우 보통 

 

.container {
	background : white;
    	color : white;
    	border : 1px solid blue;
}

.name {
	font-size : 24;
    	font-weight : bold,
}

형태로 작성 되어 집니다. 

 

반면 리액트 네이티브에서는 자바스크립트 파일 에서 StyleSheet라는 것을 상용합니다. 

 

작성법은 다음과 같습니다. 

 

import { StyleSheet, Text, View } from "react-native";


export default function App() {
  const name = "jsx";
  return (
    <View style={styles.container}>  //선언된 styles에 container를 호출함
 		<Text style={styles.font>하윙</Text>
    </View>
  );
}

const styles = StyleSheet.create   //변수선언({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  font: {
    fontSize: 20,
  },
});

 

CSS와 의 주된 차이점으로는 

 

1.  셀렉 개념이 존재하지 않는 다는점

2. display 속성은 기본적으로 flex이며 다른값은 none 밖에 없다.

3. 모든 스타일 속성은 '카멜케이스'로 작성을해야한다.

4. flexDirection 속성은 React-Native에서는 'colum'으로 사용되어진다.  (웹에서는 row)

5. background -> backgroundColor 사용

6. boder ->. borderWidth , borderStyle , borderColor 등을 각각 설정을 해줘야함