React Fundamentals ?

React Native는 React 위에서 돌아갑니다.

React

React는 Javascript으로 이루어져있고 사용자 인터페이스를 제공하는 오픈 소스 라이브러리입니다.

 

React는 다음과 같은 concepts을 이해해야합니다.

• components

• JSX

• props

• state

Component

이제 React Native에 첫번째 예시를 보여드리겠습니다.

 

React에서는 Function Component or Class Component로 구성을 할수가 있습니다.

//function

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

export default function Cat() {
  return (
    <Text>Hello, I am your cat!</Text>
  );
}


// class

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

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

 

 

1. React에서 Component을 불러옵니다.

 

import React, { Component } from 'react';

2. React Native에서 Text에 대한 불러옵니다.

import { Text } from 'react-native';

3. render() function을 통해서 UI정보에 대해서 표시를 합니다.

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

 

JSX

React 그리고 React Native에서 JSX을 사용합니다.

JSX는 React Element안에서 Javascript을 사용할수가 있습니다.

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

export default function Cat() {
  const name = "Maru";
  return (
    <Text>Hello, I am {name}!</Text>
  );
}

-------------------------------

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

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

 

Props

아래와 같이 props을 통해서 컴포넌트에게 데이터를 전달할수가 있습니다.

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

function Cat(props) {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
}

export default function Cafe() {
  return (
    <View>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
}

 

State

state는 데이터 저장소 같은 느낌입니다.

따라서 state을 통해서 데이터를 관리하고 state가 변경이 됬을때 다시 render을 시도합니다.

import React, { Component } from "react";
import { Button, Text, View } from "react-native";

export class Cat extends Component {
  state = { isHungry: true };

  render(props) {
    return (
      <View>
        <Text>
          I am {this.props.name}, and I am
          {this.state.isHungry ? " hungry" : " full"}!
        </Text>
        <Button
          onPress={() => {
            this.setState({ isHungry: false });
          }}
          disabled={!this.state.isHungry}
          title={
            this.state.isHungry ? "Pour me some milk, please!" : "Thank you!"
          }
        />
      </View>
    );
  }
}

export default class Cafe extends Component {
  render() {
    return (
      <>
        <Cat name="Munkustrap" />
        <Cat name="Spot" />
      </>
    );
  }
}