[RN] React Native 컴포넌트와 스타일링

 

이전 글에서 프로젝트 생성과 실행을 해봤으니 이번엔 핵심 컴포넌트와 스타일링 방법에 대해서 알아보려고 한다.

 

1. Core Components

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!!!!!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

 

App.js에는 react-native에서 불러온 StyleSheet와 Text, View 내장 컴포넌트가 있고 JSX에서 사용된다.

네이티브는 브라우저가 아니기 때문에 DOM을 가지고 있지 않아서

DOM을 통해 브라우저에서 작업할 때 사용하는 <div>나 <h2>등의 HTML 요소를 지원하지 않는다.

 

RN에서 사용하는 Core Components는 그렇게 많지 않으니 아래 컴포넌트 리스트 문서를 읽어보는 것이 좋을 것 같다.

https://reactnative.dev/docs/components-and-apis

 

View, Text

위 App.js에서 Text 컴포넌트를 삭제 후 저장하면 에뮬레이터엔 빈 화면만 나오게 되는 걸 볼 수 있는데

<Text> 컴포넌트 없이 <View>사이에 'Hello World' 문구를 추가하면 어떻게 될까?

 

터미널과 시뮬레이터엔 텍스트 문자열은 Text 컴포넌트 안에 렌더링 되어야한다는 오류를 친절하게 알려준다.

 

어찌 보면 View 컴포넌트가 웹에서 사용되는 div와 비슷해보일 수 있지만,

div는 텍스트, 이미지, 버튼 등의 다양한 콘텐츠를 포함할 수 있는 컨테이너 역할인 반면

View는 직접적으로 텍스트나 다른 콘텐츠를 직접 담지 않고 주로 레이아웃을 구성하거나 다른 컴포넌트로 감싸는 역할을 담당한다.

그래서 View안에서 텍스트를 넣기 위해선 텍스트의 시작과 끝을 Text 태그로 감싸줘야한다.

 

Button

React에선 button같은 HTML요소를 직접 가져올 필요가 없지만, RN에선 버튼을 추가하기 위해 import해서 Button을 가져와야한다.

또 버튼 태그 사이에 캡션을 추가하는 것이 아니라 <Button /> 하고 닫은 다음 <Button title="클릭" /> 이것 처럼 title 프로퍼티를 추가해서 입력해야한다.

 

버튼을 추가하면 위 처럼 각 플랫폼의 기본 스타일과 버튼의 효과가 적용된 걸 볼 수 있다.

 

 

2. 컴포넌트 스타일링

RN은 브라우저가 아니기 때문에 웹에서 사용되는 CSS 코드를 직접 사용할 수 없다.

대신 자바스크립트를 사용해서 스타일링을 적용할 수 있는데 하나는 인라인 스티일링, 또 하나는 StyleSheet 객체를 사용하는 것

인라인 스타일은 JSX에서 직접 스타일을 지정하며 일반적인 React 스타일링 방식과 비슷하고,

StyleSheet객체를 사용하는 건 위에 App.js에서 보이는 스타일링을 말한다.

 

그냥 보면 CSS와 비슷하게 생겼지만, CSS의 프로퍼티와 기능의 일부만 지원하고 이름도 전부 같지는 않다.

또 View에서 style 프로퍼티를 사용하고 있는데 이것고 모든 요소에서 지원되는 것은 아니다!

 

인라인 스타일을 작성하기

<Text style={{ margin: 16, padding: 16, borderWidth: 2, borderColor: "red" }}>
	스타일 적용하기
</Text>

 

텍스트 안쪽 바깥쪽에 여백을 주는데 뒤에는 숫자만 입력해야한다. 값은 자동으로 디바이스의 픽셀 밀도에 맞게 조정이 되기 때문

또 다른 점은 테투리를 주기 위해서 border만 입력하면 border라는 프로퍼티가 존재하지 않기 때문에 오류가 발생한다.

그래서 borderWidth로 테두리 너비와 borderColor로 테두리 색을 지정하면 된다.

 

 

 

StyleSheet 객체 작성하기

보통은 가독성 문제로 JSX코드와 스타일 코드를 명확히 구분하고 스타일을 재사용할 수 있는 StyleSheet로 많이 작성한다.

위에 줬던 스타일을 똑같이 주고 싶다면

const styles = StyleSheet.create({
  dummyText: {
    margin: 16,
    padding: 16,
    borderWidth: 2,
    borderColor: "red",
  },
});

styleSheet.create를 사용해서 스타일 객체를 만들고

이름은 원하는데로 붙여서 아까 인라인 스타일링 했던 코드를 안에 넣어주면 된다. (객체로 값 설정하기)

그리고 JSX코드에서 해당 스타일을 적용하려면 다음과 같이 사용할 수 있다.

<Text style={styles.dummyText}>Hello World!!!!!</Text>
<Text style={styles.dummyText}>스타일 적용하기</Text>

 

 

 

 

스타일링 문서 확인하기

https://reactnative.dev/docs/style