[ReactNative] 리액트 네이티브 컴포넌트 만들기 (뷰 작업, JSX 사용, 네이티브 컴포넌트 스타일링)

모든 리액트의 코드는 리액트 컴포넌트 안에 존재합니다.

리액트 네이티브 컴포넌트는 일반적인 리액트 컴포넌트와 대부분 비슷하지만

렌더링과 스타일 적용 방법에서 큰 차이가 있습니다.

 

---

뷰 작업하기

 

 

리액트를 이용해서 웹 페이지를 만들 떄는 일반적인 HTML요소 (<div>, <p>,<span> 등)를 사용하여 렌더링 합니다.

리액트 네이티브는 이러한 요소 대신에 플랫폼에 종속적인 리액트 컴포넌트를 사용합니다.

리액트	리액트 네이티브
<div>	<View>
<span>	<Text>
<li>,<ul>	<FlastList>, 자식 아이템
<img>	<Image>

가장 기본적인 컴포넌트는 크로스 플랫폼 <View>인데, 단순하고 유연한 UI 요소로 <div>와 유사합니다.

<View>컴포넌트는 iOS에서는 UIView로 렌터링되고 안드로이드에서는 VIEW로 렌더링 됩니다.

 

다른 컴포넌트들은 특정 플랫폼에서만 동작합니다.

예를 들어 <Date PickerIOS>는 iOS의 표준 날짜 선택기를 렌더링합니다.

//RNTester 샘플 앱에서 발취한  iOS 날짜 선택기 데모 코드
<DatePickerIOS
	date={this.state.date}
    mode="time"
 />

모든 UI요소는 리액트 컴포넌트로<div>와 같은 기본 HTML 요소와는 달리,

사용하기 원하는 다른 컴포넌트를 명시적으로 임포트(import)할 필요가 있습니다.

<DatePickerIOS>를 임포트해야 한다면 다음과 같이 작성하면 됩니다.

import{
	DatePickerIOS
    }from 'react-native';

 

* 플랫폼 특정 컴포넌트와 API는 문서에 특별한 태그로 구분되어 있고
보통 플랫폼 이름이 컴포넌트 이름의 접미사로 사용됩니다!

ex) <TabBarIOS>와 <ToolbarAndroid>

 

이 컴포넌트들은 플랫폼에 따라 차이가 있어서 리액트 네이티브로 작업할 때

리액트 컴포넌트를 어떻게 구조화하는지가 더욱 중요합니다.

 

리액트로 웹페이지를 만들 때 컴포넌트의 역할에 따라

마크업을 렌더링하는 컴포넌트와 로직이나 자식 컴포넌트를 다루는 컴포넌트로 구분하여 작성하는 경우가 많습니다.

리액트 네이티브로 작업할 경우 이렇게 역할에 따라 컴포넌트를 구분하여 작성하는 것은 코드를

플랫폼에 상관없이 재사용할 때 유리합니다.

 

리액트 네이티브의 <DatePickerIOS> 컴포넌트는 당연히 안드로이드에서 사용할 수 없지만

관련된 로직은 별도의 컴포넌트로 분리하고 UI부분만 플랫폼에 따라 교체하면 재사용할 수 있습니다.

또한 picker.ios.js와 picker.android.js와 같이 플랫폼에 특화된 버전의 컴포넌트를 개별 파일로 지정할 수도 있습니다.

이와 관련된 내용은 다음에 좀 더 자세히 포스팅할 예정!

 

 

---

JSX 사용하기

리액트 네이티브에서도 리액트와 동일하게 'JXM(JavaScript XML)'를 이용하여 뷰를 만듭니다.

대부분의 웹 개발자들은 HTML, CSS, JS를 서로 다른 파일로 구분하는 것이 당연하지만

JSX는 마크업과 이를 다루는 자바스크립트를 한 파일 안에 작성합니다.

 

JSX는 기술에 따라 코드를 분리하기보다 하는 일에 따라 분리하는 것을 더 중요하게 생각합니다.

이는 리액트 네이티브에서 더욱 엄격히 다뤄지는데,

브라우저가 없는 환경에서는 컴포넌트마다 스타일, 마크업, 동작 방법을 한 파일에 작성하는 것이 더욱 의미 있습니다.

리액트 네이티브의 .js 파일은 사실 모두 JSX 파일입니다.

만약 웹페이지를 만들 때 JSX가 아닌 기본 JS로 리액트 작업을 했더라도 리액트 네이티브를 사용할 때는 JSX로 전환됩니다.

 

JSX를 본 적 없더라도 문법이 상단히 단순하기 때문에 걱정할 필요 없습니다.

아래 코드는 기본 JS  파일로 만든 리액트 컴포넌트 입니다.

class HelloMessage extends React.Component{
 render(){
 	return React.createElement{
    	"div",
        null,
        "Hello",
        this.props.name
       );
    }
}

ReactDOM.rander(
	React.creatrElement(HelloMessage,{ name: "Bonnie"}),
    mountNode);

 

JSX를 이용하면 이를 더욱 간결하게 만들 수 있습니다.

React.createElement를 호출하고 HTML 속성들을 넘기는 대신에 XML 형식의 마크업을 사용합니다.

 

class HelloMessage extends Component {
 render(){
 	//createElement를 호출하는 대신 마크업을 리턴한다.
    return <div>Hello {this.pros.name}</div>;
    }
}

// 더 이상 createElement를 호출할 필요가 없다.
ReactDOM.render(<HelloMessage name="Bonnie" />, mountNode);

 

앞의 두 코드는 모두 다음 HTML과 같은 페이지에 렌더링합니다.

<div>Hello Bonnie<div>

 

 

---

네이티브 컴포넌트 스타일링

 

웹 페이지를 만들 때 리액트트 컴포넌트의 스타일 지정은

HTML 요소에 스타일을 지정하는 것과 동일하게 CSS를 이용합니다.

리액트는 CSS를 작성하는 방법에 거의 영향을 주지 않는데, 리액트에서 props와 state를 이용하여

동적으로 CSS class 이름을 만들 수도 있지만 이외에는 웹 페이지 스타일을 어떤 방식으로 작성하든 상관 없습니다.

 

웹이 아닌 다른 플랫폼에서는 레이아웃과 스타일 적용하는 방법이 다양합니다. 

리액트 네이티브는 스타일을 적용하는 하나의 표준을 사용하는데,

리액트와 대상 플랫폼 사이의 브리지는 매우 간결하게 정리된 CSS 구현체를 가지고 있습니다.

 

flexbox위주의 레이아웃을 할 것인데, CSS와 완전히 같지 않지만 이는 모든 CSS 규칙을 지원하려 하기보다는

스타일 적용을 단순하게 하는 데 초점이 맞춰져 있기 때문입니다.

 

그리고 웹 환경에서는 브라우저마다 지원하는 CSS의 범위가 다른데

리액트 네이티브는 같은 스타일 규칙을 지원하도록 강제화할 수 있습니다.

또한 리액트 네이티브는 자바스크립트 객체로 존재하는 인라인 스타일을 사용하기를 강조하고 있습니다.

리액트 팀은 웹을 위한 리액트 때부터 이를 강조했습니다. 

리액트의 인라인 스타일을 경험한 적이 있다면 다음 코드가 친숙할 것 입니다.  

//스타일 정의...
const style = {
	backgroundColor: 'white',
    fontSize: '16px'
};

//...스타일 적용
const style txt= (
	<Text style = {style}>
    	A styled text
    <Text>);

 

이랙트 네이티브는 스타일 객체를 만들고 확장하는 도구를 제공하는데, 이는 인라인 스타일을 다루기 쉽게 해줍니다.

이에 대한 자세한 내용은 다음에 포스팅!

 

 

 

 

요약

 

모바일 앱에 렌더링할 리액트 네이티브 컴포넌트를 만드는 것은

웹 페이지에 렌더링할 리액트 컴포넌트를 만드는 것과 조금 다릅니다.

JSX는 필수이며 <div>와 같은 HTML 요소 대신에 <View>와 같은 컴포넌트가 기본 구성요소입니다.

스타일 적용 방법도 꽤나 다릅니다.

CSS 기반이지만 웹에서 지원하는 모든  CSS 속성을 지원하지도 않으며 인라인으로 스타일을 지정해야 합니다.

 

 

 

 

 

 다음 내용은 위 책을 참고하여 작성하였습니다:)