[React-Native] 리액트 네이티브 뷰 만들기

 

리액트와 리액트 네이티브는 대부분 비슷하게 동작을 하지만 렌더링과 스타일 적용 방법에 대해서는 큰 차이를 보입니다.

 

뷰를 작업하기 위해서는 알아야할 점이 있습니다.

 

리액트 네이티브는 기본적으로 앱을 만들기위해 만들어진 프레임워크로 웹을 만들기 위해서 만들어진 리액트와는 차이점이 있습니다.

 

리액트는 일반적인 HTML요소를 사용하여 렌더링을 할 수 있지만 리액트 네이티브는 앱에 종속적인 리액트 컴포넌트를 사용합니다.

 

리액트 컴포넌트를 사용하는 이유는 IOS Android 등 각 앱에 대응하여 해당 앱의 코드로 변환하기 때문입니다.

 

간단히 표로 리액트와 리액트 네이티브 요소의 차이점을 알아봅시다

 

리액트 (React)	리액트 네이티브 (React-Native)
<div>	<View>
<span>	<Text>
<ul>, <li>	<FlastList>
<img>	<Image>

위와 같이 차이점이 있습니다. 위에 적은것 말고도 어마어마한 양의 요소들이 있습니다.

https://reactnative.dev/docs/button

React Native · A framework for building native apps using React

이곳에서 간단히 확인해볼 수 있습니다.

 

요소들을 살펴보았다면 이제는 JSX가 무엇인지 알아보아야합니다.

 

JSX(JavaScript XML)는 기술에 따라 코드를 분류하는 방법이 아닌 일에 따라 분류하는것에 중점을 두었습니다.

 

기본적으로 웹 개발자라하면 CSS, HTML, Javascript를 다른 파일로 구분하고 사용하는것이 일반적인데 하나틔 페이지, 컴포넌트 단위로 구성해서 작업을 하는 것은 상당히 복잡하고 어렵게 느껴집니다.. 저도 공부하고 있는 입장에서는 많이 어렵고 헷갈리더라구요!

class Test extends React.Component {
 render() {
  return React.createElement(
   "div",
   null,
   "Test ",
   this.props.title
  );
 }
}

ReactDOM.render(React.createElement(Test, { title: "React" }), mountNode);

리액트 컴포넌트의 예입니다. JSX는 위의 코드를 좀더 이해하기 편하고 사용하기 편하게 만들어 줍니다.

class Test extends React.Component {
 render() {
  return <div>Test {this.props.title}</div>
 }
}

ReactDOM.render(<Test title="React"/>, mountNode);

이와 같이 XML형식의 마크업을 사용합니다. HTML을 주로 작업하던 저에게는 이렇게 보는것이 더 직관적으로 보이더군요.

 

위의 두 코드는 모두 HTML의 <div>Test React</div> 와 같은 결과를 가집니다.

 

여기까지 했다면 이제는 저기에 스타일을 적용하고 싶습니다. 기본 글자크기에 기본 색상일테니까요.

 

리액트 컴포넌트는 리액트의 인라인 스타일을 사용하여 적용이 가능합니다.

const style = {
 fontSize: '20px',
 fontWeight: 'bold',
 color: 'red'
}

스타일의 정의는 위와 같이 하면 됩니다.

class Test extends React.Component {
 render() {
  return <div>Test {this.props.title}</div>
 }
}

ReactDOM.render(<Test style={style} title="React"/>, mountNode);

style={style}을 통해서 정의한 스타일을 적용 합니다.

 

이렇게 한다면 간단한 하나의 뷰를 만들어 볼 수 있습니다.

 

여기서 중요한 점은 앱에 기반을 두기때문에 모든 뷰의 display의 속성은 flex입니다.