[React Native] The Basics : React Fundamentals

React Native는 JavaScript와 사용자 인터페이스를 구축하는 데 널리 사용된 오픈 소스 라이브러리인 React에서 실행됩니다. React Native를 최대한 활용하기 위해서는 React 자체를 이해하는 것이 도움이 됩니다.

React의 핵심 개념에 대해 알아봅시다. :

• components
• JSX
• props
• state

더 파고들고 싶다면, React 공식 문서를 확인하길 권장합니다.

Your first component

React에 대한 이 도입부의 나머지 부분에서는 고양이(친근하고 접하기 쉬운 동물)를 예시로 들 것입니다. 다음은 첫 번째 Cat component입니다.

Function Component (Your Cat)

import React from 'react';
import { Text } from 'react-native';

const Cat = () => {
  return (
    <Text>Hello, I am your cat!</Text>
  );
}

export default Cat;

Class Component (Your Cat)

import React, { Component } from 'react';
import { Text } from 'react-native';

class Cat extends Component {
  render() {
    return (
      <Text>Hello, I am your cat!</Text>
    );
  }
}

export default Cat;

추가로 React에서 Component를 import합니다.

import React, { Component } from 'react';

Component가 함수로써가 아닌 Component를 확장하는 클래스로 시작됩니다.

class Cat extends Component {}

class components는 render()함수를 가지고 있습니다. 리턴되는 내용은 모두 React 요소로 렌더링됩니다.

class Cat extends Component {
  render() {
    return <Text>Hello, I am your cat!</Text>;
  }
}

또한 function components를 가지고 class component를 export할 수 있습니다.

class Cat extends Component {
  render() {
    return <Text>Hello, I am your cat!</Text>;
  }
}

export default Cat;

component를 export하는 수많은 방법 중 한 가지입니다. 이런 export는 Snack Plyer를 이용해 잘 작동됩니다. 하지만 앱의 파일 구조에 따라 다른 convention을 이용해야 할 수 있습니다. JavaScript imports and exports에 대한 cheatsheet가 도움이 될 것입니다.

이제 return문을 자세히 보십시오. <Text>Hello, I am your cat!</Text>는 요소를 편리하게 작성하게 하는 JavaScript 구문인 JSX를 사용하고 있습니다.

JSX

React와 React Native는 <Text>Hello, I am your cat!</Text>와 같이 JavaScript 내부에 요소를 작성할 수 있는 구문인 JSX를 사용합니다. React 문서는 JSX에 대한 포괄적인 가이드를 포함하고 있습니다. 자세한 내용은 JSX를 참조하세요. JSX는 JavaScript이기 때문에, 안에 변수를 사용할 수 있습니다.