기본

개요

리액트네이티브는 리액트와 비슷합니다. 리액트는 부속품으로 웹 컴포넌트를 이용하지만 리액트네이티브는 순전히 리액트네이티브 자체 컴포넌트를 사용합니다.

ReactNative는 자바스크립트로 작성되었습니다. ReactJS가 Virtual DOM을 이용해서 웹브라우저를 변경합니다. ReactNative는 Virtual DOM을 다른 디바이스 iOS나 Android OS에 적용시킨 것입니다. 그리고 다른 OS에도 적용 가능합니다. 즉, Windows, Ubuntu등에 적용할 수 있습니다.

컴포넌트

ReactNative는 컴포넌트 단위로 이루어지고 작동합니다. 컴포넌트는 render() 메소드를 이용해서 사용자 화면에 표시합니다. render 메소드 안에는 html의 태그와 대응되는 컴포넌트들을 사용합니다. 예를 들어 html의 div 태그와 대응되는 컴포넌트로 View가 있고 span과 대응되는 컴포넌트로는 Text가 있습니다.

컴포넌트

React

React Native

<div>

<View>

<span>

<Text>

<li>, <ul>

<FlastList>, child items

<img>

<Image>

플랫폼(안드로이드, iOS)에 종속적인 컴포넌트들도 있습니다. 예를 들어 <DatePickerIOS>는 iOS에서만 사용할 수 있는 컴포넌트입니다.

JSX

ReactNative 코드는 자바스크립트와 XML이 혼합된 형식으로 작성됩니다. 이러한 형식을 JSX라고 합니다. 예를 들면 다음과 같은 형식입니다.

const element = <Text>Hello, world!</Text>;

JSX는 자바스크립트와 XML 형식의 요소(element)와 컴포넌트(component)들로 구성되어 있기 때문에 자바스크립트 코드를 사용할 때 주의해야 합니다. XML 형식 즉, 화살괄호(< >)로 구성된 컴포넌트 또는 요소 안에서는 일반적인 자바스크립트 코드들을 사용할 수 없습니다. 즉, for, if 문들과 let 등을 사용할 수 없습니다. if 문과 같이 조건식을 다룰 필요가 있는 경우는 다음 사이트에 대체 방법을 소개하고 있습니다. 하지만 자바스크립트 표현식은 컴포넌트에서 사용할 수 있습니다. 즉, 삼항연산식과 자바스크립트 변수등은 중괄호 안에 사용하시면 됩니다.

컴포넌트에서 여러 컴포넌트를 렌더링 해야 할 때, 그 컴포넌트들을 필수적으로 하나의 컴포넌트 안에 포함시켜줘야됩니다. 예를들어 다음과 같이 코드를 작성하면 변환 과정에서 오류가 발생합니다.

return (
  <Text>Hello JSX</Text>
  <Text>Welcome</Text>
);

다음과 같이 <View> 컴포넌트를 이용해 감싸주면 오류가 발생하지 않습니다.

return (
  <View>
    <Text>Hello JSX</Text>
    <Text>Welcome</Text>
  </View>
);

자바스크립트 표현식 사용

JSX 요소(element) 또는 컴포넌트 안에서 자바스크립트 표현식을 사용하기 위해서는 자바스크립트 표현식을 중괄호 { }로 감싸주면 됩니다.

render() {
  let text = "JSX World!";
  return (
    <View>
      <Text>Hello JSX</Text>
      <Text>Welcome {text}</Text>
    </View>
  );
}

자바스크립트 변수 text를 중괄호로 감싸 {text}를 사용하여 text 자바스크립트 변수를 렌더링합니다.

JSX도 표현식입니다 2

컴파일을 하면 JSX 표현식은 보통의 자바스크립트 객체, 함수와 같이 됩니다.

이것은 if 문과 for 문 등에서 JSX를 사용할 수 있다는 말입니다. 다음과 같이 JSX를 변수에 할당할 수 있고, 인자로 넘길 수 있으며 함수의 반환값으로 사용될 수 있습니다.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSX는 여러 줄에 걸쳐서 입력될 수 있습니다. 그럴때는 자바스크립트의 자동 세미콜론 삽입에 대비해 소괄호로 묶어주는 것이 좋습니다.

JSX는 객체입니다 1

바벨(Babel)은 JSX를 React.createElement()를 이용해서 컴파일을 합니다. 따라서 다음 두 코드는 똑같습니다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()는 몇 가지 버그제거를 위한 확인을 한 후 다음과 같은 객체를 생성합니다.

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

if-else 문 사용 불가

JSX 안에서 사용되는 자바스크립트 표현에는 if-else 문이 사용 불가합니다. 이에 대한 대안은 삼항연산자 ( condition ? true : false ) 표현을 사용하는 것입니다.

{1 == 1 ? 'True' : 'False'}

Props

JSX 화살괄호 안에 있는 속성들을 props라고 부릅니다. 리액트가 사용자정의 컴포넌트를 만나면 JSX 속성(props)에 해당하는 객체들을 모아서 props 안에 감싸 사용자정의 컴포넌트에 넘겨줍니다. props는 html 태그의 속성과 비슷한 역할을 합니다.

참고 사이트

1

Introducing JSX https://reactjs.org/docs/introducing-jsx.html

2

JSX Getting Started https://reactjs.org/docs/getting-started.html

3

JSX 기초 https://www.taniarascia.com/getting-started-with-react/

4

ES6에서 컴포넌트와 props https://reactjs.org/docs/components-and-props.html#es6-classes