🗣️ 내일부터 기업협업을 나가게됐다. 시간이 어떻게 흘러갔는지.. 수료까지 한달밖에 남지 않았다니 믿기지 않는다😭
내가 가게된 기업협업은 React Native를 사용하는 곳이라서 가기 전에 공식문서를 살펴보면서 정리할 목적으로 작성한 글이다.

React Native 란?

React 와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크입니다. React 에서 실행됩니다. React Native를 최대한 활용하려면 React 자체를 이해하는 것이 도움이 됩니다.

기본 구성 요소

Android 개발 : Kotlin 또는 Java로 view 작성
iOS 개발 : Swift 또는 Objective-C를 사용
Native Components (기본 구성 요소)
Android 및 iOS와 동일한 보기에서 지원 ⇒ React Native 앱은 다른 앱과 같은 모양, 느낌 및 성능을 제공

Contributed Components (핵심 구성 요소)
핵심 구성 요소 모두 보기
지금 바로 앱 빌드를 시작하는 데 사용할 수 있는 필수 기본 구성 요소 세트와 함께 제공

REACT NATIVE UI COMPONENT	ANDROID VIEW	IOS VIEW	WEB ANALOG	DESCRIPTION
<View>	<ViewGroup>	<UIView>	<div>	flexbox, style, 일부 터치 처리 및 접근성 컨트롤이 있는 레이아웃 지원
<Text>	<TextView>	<UITextView>	<p>	텍스트 문자열 표시, 스타일 지정 및 중첩하고 터치 이벤트도 처리
<Image>	<ImageView>	<UIImageView>	<img>	이미지 표시
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	multiple components 와 views
<TextInput>	<EditText>	<UITextField>	<input type="text">	사용자가 텍스트를 입력할 수 있습니다.

핵심 개념

• components
• JSX
• props
• state

1. import

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

2. 구성요소의 시작 → 함수

const Cat = () => {};

함수 구성 요소가 반환하는 것은 무엇이든 React 요소로 렌더링됩니다

3. <Text> 요소 렌더링

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

4. export default 내보내기

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

export default Cat;

다음과 같이 앱 전체에서 사용하기 위해 JavaScript로 함수 구성 요소를 내보낼 수 있습니다 .

<Text>Hello, I am your cat!</Text>

쓰기 요소를 편리하게 만드는 일종의 JavaScript 구문인 JSX를 사용하고 있습니다.

JSX

JSX는 JavaScript 이기 때문에 내부에서 변수를 사용할 수 있습니다.
고양이 이름을 선언하고 name 내부에 중괄호 삽입합니다.

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

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

export default Cat;

모든 JavaScript 표현식은 중괄호 사이에서 작동합니다.
중괄호는 JSX의 JS 기능에 대한 포털을 만드는 것으로 생각할 수 있습니다!

Multiple Components

코드를 반복하지 않고 이 구성요소를 여러번 여러 위치에서 렌더링 할 수 있습니다.

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

const Cat = () => {
  return (
    <View>
      <Text>I am also a cat!</Text>
    </View>
  );
}

const Cafe = () => {
  return (
    <View>
      <Text>Welcome!</Text>
      <Cat />
      <Cat />
      <Cat />
    </View>
  );
}

여기에서 Cafe는 상위 구성 요소이고 각각 Cat은 하위 구성 요소입니다.

Props

Props 는 "속성"의 줄임말입니다.
React 구성 요소를 사용자 지정할 수 있습니다.

<Cat> 은 각각 다른 렌더링 name 을 전달합니다.
핵심 구성 요소도 props로 사용자 지정할 수 있습니다.

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;

{{ }}둘러싼 이중 중괄호에 주목하세요.
⇒ styleJSX에서 JavaScript 값은 로 참조됩니다.
{}이것은 배열이나 숫자와 같이 문자열이 아닌 다른 것을 소품으로 전달할 때 편리합니다. + JS 객체도 중괄호로 표시합니다.
따라서 JSX에서 JS 객체를 전달하려면 객체를 다른 중괄호 쌍 으로 감싸야 합니다.
👉🏻 {{width: 200, height: 200}}

useState

React의 useStateHook 을 호출하여 컴포넌트에 상태를 추가할 수 있습니다 . 
Hook은 React 기능을 "연결"할 수 있는 일종의 기능입니다. 
예를 들어, useState는 함수 구성 요소에 상태를 추가할 수 있는 Hook 입니다.

1. 먼저 useState를 React에서 가져와야합니다.

import React, { useState } from 'react';

2. 함수 내부에서 구성 요소의 상태를 선언합니다.

const Cat = (props) => {
  const [isHungry, setIsHungry] = useState(true);
  // ...
};

• 초기 값으로 "state variable"를 생성합니다. 이 경우 상태 변수는 isHungry이고 초기 값은true 입니다.
• setIsHungry 해당 상태 변수의 값을 성정하는 함수를 만듭니다.

[<getter>, <setter>] = useState(<initialValue>)

3. Button 을 추가하고 onPress를 props로 제공합니다.

<Button
  onPress={() => {
    setIsHungry(false);
  }}
  //..
/>

이제 누가 버튼을 누르면 onPress가 실행되어 setIsHungry(false)가 실행됩니다.
이것은 상태변수 isHungry를 false로 설정합니다.

4. isHungry가 false이면 Button의 disabled 가 ture로 변경되고, title이 변경됩니다.

<Button
  //..
  disabled={!isHungry}
  title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
/>

isHungry 가 const 이지만 재할당이 가능하다는 것을 눈치 챘을 겁니다.
setter함수인 setIsHungry가 호출되면 해당 구성 요소가 다시 렌더링 됩니다. 이 경우 Cat 함수가 다시 실행되고 이번에 useState는 isHungry의 다음 값을 제공합니다.

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

프래그먼트 <> … </>
JSX요소는 하나의 태그로 래핑되어야합니다.
불필요한 추가 래핑 요소를 중첩하지 않고 수행하기 위해 프래그먼트를 사용합니다.