cf. js import/export cheatsheet

• RN은 React 바탕 (js로 UI를 만들 수 있는 오픈 소스 라이브러리)
• 그러므로 React를 이해하는 것이 중요하다

React의 핵심 개념

• components
• JSX
• props
• state

Component

• function 형태

import React from 'react'; //필수
import { Text } from 'react-native'; //core component를 import한다

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

export default Cat;

• class 형태

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

class Cat extends Component { //class 이름 extends Component
  render() { //render 내부 코드를 리액트 요소로 렌더링한다 
    return (
      <Text>Hello, I am your cat!</Text>
    );
  }
}

export default Cat;

JSX

• React, RN이 사용하는 문법 : JS 문법을 쓸 때는 {}안에 쓴다
  ex. 변수, 함수 모두 사용 가능
• 문법

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

const getFullName = (firstName, secondName, thirdName) => {
  return firstName + " " + secondName + " " + thirdName;
}

const Cat = () => {
  return (
    <Text>
      Hello, I am {getFullName("Rum", "Tum", "Tugger")}!
    </Text>
  );
}

export default Cat;

Custom Component

• core component를 서로 중첩해서 새로운 컴포넌트를 만들 수 있다
• 이렇게 중첩하고 재사용 가능한 컴포넌트들이 리액트 패러다임의 중심에 있다
• View : div / Text : p와 비슷

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

const Cat = () => {
  return (
    <View>
      <Text>Hello, I am...</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }}
        defaultValue="Name me!"
      />
    </View>
  );
}

export default Cat;

• 부모 컴포넌트 : 다른 컴포넌트를 렌더링 하는 컴포넌트
• 자식 컴포넌트 : 부모 안에 속하는 컴포넌트

Props

• properties
• props를 이용해서 각각의 컴포넌트를 커스텀할 수 있다
• 대부분의 core component는 props를 이용해서 커스텀 가능하다

ex. Image

• source:이미지를 정해준다
• style: 디자인과 레이아웃
  이런 props들은 JS 객체 형태로 전달해야 하기 때문에 컴포넌트 태그 내에서 {{}}로 사용해야 한다
  {{width: 200, height: 200}}

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

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

const Cafe = () => {
  return (
    <View>
      <Cat **name="Maru"** />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
}

export default Cafe;

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

const CatApp = () => {
  return (
    <View>
      <Image
        source={{uri: "https://reactnative.dev/docs/assets/p_cat1.png"}}
        style={{width: 200, height: 200}}
      />
      <Text>Hello, I am your cat!</Text>
    </View>
  );
}

export default CatApp;

State

• 컴포넌트마다 사용할 수 있는 data 메모리
• 시간에 따라 변하는 데이터 관리 하기에 좋다
• 어떤 형태의 데이터든 사용할 수 있다
• 사용자와 상호작용할 때 사용하는 데이터를 관리하기에도 좋다

import React, { useState } from "react"; //import해서 사용한다
import { Button, Text, View } from "react-native";

const Cat = (props) => {
  const [isHungry, setIsHungry] = useState(true); 
  //const [state변수, 갱신함수] = useState(state변수의 초기값)
  //const인데 재할당 가능한 이유 
  : setIsHungry같은 함수가 호출되면 컴포넌트가 재렌더링된다
 

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry} //isHungry가 false가 되면 버튼이 disabled된다
        title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
      />
    </View>
  );
}

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
}

export default Cafe;