React Native와 React 기본

이번에는 모바일 앱 개발을 위한 React Native와
개발을 위해 필요한 React의 기본에 대해서 간단히 포스팅하겠습니다..! ✈

 

React Native?

• React Native는 React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크
• Javascript를 사용하여 플랫폼의 API를 액세스 하고 React의 Component를 사용하여 UI의 모양과 동작을 설명함.

 

뷰(View)와 모바일

• 뷰(View)는 UI의 기본 구성 요소이며 text, image, 사용자 input 등을 담는 직사각형 element를 말함.
• 뷰(View)는 뷰(View) 안에 또 다른 뷰(View)를 포함할 수 있음

<출처> - React Native 공식 Documentation/ Android와 iOS 앱에서 사용되는 다양한 뷰의 일부

 

주요 컴포넌트들

React Native에는 컨트롤부터 활동 표시기까지 다양한 컴포넌트들이 존재한다.

React Native UI 컴포넌트	Android View	iOS View	Web Analog	설명
<View>	<ViewGroup>	<UIView>	<div>	flexbox, 스타일, 일부 터치 처리, 접근성 제어 등을 제공합니다.
<Text>	<TextView>	<UITextView>	<p>	문자열을 표시하고 스타일을 지정하며, 텍스트 내에서 터치 이벤트도 처리합니다.
<Image>	<ImageView>	<UIImageView>	<img>	다양한 유형의 이미지를 표시합니다.
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	여러 컴포넌트와 뷰를 포함할 수 있는 일반적인 스크롤 컨테이너
<TextInput>	<EditText>	<UITextField>	<input type="text">	사용자가 텍스트를 입력할 수 있도록 합니다.

 

React 기본 개념

• React Native는 Javacript로 React 위에서 실행된다.
• 필요한 React의 핵심 개념은...
  • 컴포넌트(Components)
  • JSX
  • Props
  • State

컴포넌트 (Components)

※ 모든 예제를 'Cat'을 사용해서 설명할 예정입니다.

• Cat 컴포넌트 정의

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

// 컴포넌트는 함수로 정의
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

// 앱 전역에서 사용하도록 export default
export default Cat;

JSX

• React에서 사용하는 JavaScript 확장 문법으로, HTML과 유사한 구문을 사용해 UI를 정의
• JSX는 JavaScript 코드 안에 XML/HTML과 유사한 문법을 작성할 수 있도록 도와줌.
• 예시 코드

import React from 'react';

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

const fullName = getFullName("Rum", "Tum", "Tugger");
return <Text>{fullName}</Text>;

Props

• React에서 속성(properties)을 의미하는 용어로 컴포넌트에 전달되는 데이터나 설정값을 말함.
• Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되며, 자식 컴포넌트는 이 데이터를 활용하여 UI를 렌더링 하거나 특정 동작을 수행
• 특징
  1. 읽기 전용: Props는 자식 컴포넌트에서 읽기만 할 수 있고, 변경할 수 없음
  2. 부모에서 자식으로 전달
  3. 컴포넌트의 커스터마이징: Props를 사용하면 컴포넌트의 동작이나 외형을 동적으로 설정할 수 있음
• 예시 코드

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

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

• React Native의 대부분 핵심 컴포넌트도 props로 커스터마이징이 가능하며 Image 컴포넌트도 가능하다.
  • <Image source={{uri: '[https://example.com/cat.jpg'](https://example.com/cat.jpg')}} />

State

• React와 React Native에서 컴포넌트의 상태를 관리하는 방법을 말함.
• 컴포넌트의 데이터나 상태를 저장하는 곳으로 사용자의 상호작용이나 시간에 따라 변할 수 있는 데이터를 다루는 데 사용
• 특징
  1. 동적인 데이터 저장: state는 시간이 지나면서 변경될 수 있는 데이터를 저장 ex) 버튼 클릭값, 입력 필드값 등
  2. 컴포넌트 내에서 관리: state는 해당 컴포넌트 내에서만 관리되며, 변경되면 그 컴포넌트는 다시 렌더링됨
  3. 변경 시 UI 업데이트: state 값이 변경되면 React는 UI를 자동으로 업데이트하여 반영
• 컴포넌트에 state를 추가하기 위해서 React의 useState 훅을 사용함.
• 예시 코드

import React, {useState} from 'react';

const Cat = () => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>{isHungry ? 'I am hungry!' : 'I am full!'}</Text>
      <Button
        title="Feed me"
        onPress={() => setIsHungry(false)}
      />
    </View>
  );
};

• useState는 두 가지를 반환함.
  1. state : isHungry와 같은 상태 변수를 정의
  2. setState : setIsHungry와 같은 상태 변수의 값을 업데이트하는 함수

컴포넌트 여러 번 사용하기

• 컴포넌트는 다음과 같이 여러 번 사용할 수 있어 코드의 복잡성을 줄이고 효율을 높일 수 있다.

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

자료

• React Native 공식 Documentation - Guides