ReactNative 리액트네이티브 : 기본 컴포넌트 구성 및 CSS 스타일링

 

 

1. ReactNative 컴포넌트 

 

컴포넌트는 '구성 요소'라는 의미를 갖고 있다. 즉, UI를 구성하는 요소라고 이해하면 된다.

리액트의 경우, 여러 컴포넌트로 쪼갠 뒤 그 컴포넌트를 이어 붙이면서 작업하는데 이는 리액트 네이티브에서도 마찬가지다.

 

import React from 'react';
import {SafeAreaView, StyleSheet, View, Text} from 'react-native';

function App() {
    return (
        <SafeAreaView>
            <View>
            	<Text>React Native!</Text>
            </View>
        </SafeAreaView>
    );
};
  
const styles = StyleSheet.create({ // 스타일 지정 방법
    block: {
    	flex: 1, //flex 1을 설정해주면 위치한 곳의 모든 영역을 차지
    }
)}

  export default App;

 

 

SafeAreaView : 아이폰8 이상 기종에서 화면의 보이지 않는 영역, 최하단 영역에 내용이 보이는 것을 방지
View : 가장 기본 컴포넌트. 레이아웃 및 스타일 담당
Text : 텍스트를 보여준다

 

 

 

2. ReactNative Props 설정

 

 

Greeting.js

function Greeting(props) {
    return (
        <View>
        	<Text> Hello, {props.name} </Text>
        </View>
    )

 

Greeting 컴포넌트에서 props라는 파라미터를 설정하고 Text JSX의 내용을 파라미터로 받아오는 props의 name으로 설정하였다.

 

 

App.js

import Greeting from ...

function App() {
    return (
        <SafeArea>
        	<Greeting name="jieun" />
        </SafeArea>
)
}

App.js 파일에서 Greeting 컴포넌트를 Import하여 사용할 때 name이란 props를 'jieun'이라고 넘겨줬다.

그 결과 'Hello, jieun'이라는 텍스트가 화면에 출력된다.

 

만약 컴포넌트에 Props를 지정하지 않은 경우에 기본값을 설정해주고 싶다면 defaultProps를 사용한다.

Greeting.defaultProps = {
	name: 'jieungo'
}

 

defaultProps를 정해주면, 위의 name에 아무것도 전달해주지 않아도 기본값이 들어간다.

 

* 대문자로 시작하는 JSX태그와 자바스크립트 표현식을 보여줄 땐 중괄호로 감싸는 방법은 리액트와 똑같다.

 

 

 

3. ReactNative CSS Styling

 

별도의 CSS파일이 아닌, 컴포넌트 내부에 함께 작성해준다.

const styles = StyleSheet.create({
 component: {
 	스타일 지정..
    },
  componentTwo: {
  	스타일 지정..
    },
 )}

 

CSS와의 주요 차이점으로

 

1. 셀렉터 개념이 존재하지 않음

2. 모든 스타일 속성은 카멜 케이스로 작성

3. display 속성은 flex가 기본 (다른 값은 none)

4. flexDirection의 기본값은 column 열로 지정

5. 스타일링의 숫자 단위는 dp뿐

6. background -> backgroundColor 사용

7. border 하나로 처리하지 못함. borderWidth, borderColor... 같이 따로 설정

 

function StyleExample(props) {
return (

<View style={styles.block}> 
{/* 스타일이 하나일 경우 */}

<View style={[styles.box, styles.rounded]}> 
{*/ 스타일 두개 이상은 []로 감싸줌 */}

<View style={[styles.box, props.rounded && styles.rounded>
{*/ 조건부 스타일링 */}

...

 

props와 defaultProps를 통해 스타일을 주는 또 다른 방법 (객체 이용)

 

function StyleExample() {
...
<View sytle={sizes[props.size]}>
...
}


StyleExample.defaultProps = {
	size: 'medium' //props로 넘어오는 size가 없을 땐 medium 사이즈 적용
}

const styles = StyleSheet.create({ //각 변수명대로 사이즈 지정
	small: {
    	width: 32,
        height: 32,
        },
    medium: {
        width: 64,
        height: 64,
        },
    large: {
        width: 128,
        height: 128,
        },
})

const sizes = { //sizes 객체 생성
    small: styles.small,
    medium: styles.medium,
    large: styles.large,
}