풀스택 36일차 (React Native)

(2024.09.19기준)

 

React, React Native 및 Node.js 개요

React.js

• 정의: React.js는 Facebook에서 개발한 자바스크립트 라이브러리로 사용자 인터페이스를 구축하기 위한 라이브러리
• 주요 특징:
  1. 컴포넌트 기반: UI를 독립적인 컴포넌트로 나눠서 개발
  2. Virtual DOM: UI 업데이트를 효율적으로 관리
  3. 단방향 데이터 흐름: 데이터가 컴포넌트 트리를 통해 한 방향으로만 흐름
   

React Native

• 정의 : React Native는 다양한 플랫폼(Android, iOS 등)에 대응하는 앱을 개발할 수 있는 프레임워크, 각 OS의 표준 렌더링 API를 사용
• 주요 특징:
  1. 크로스 플랫폼: 한 번의 코드 작성으로 여러 플랫폼에서 동작
  2. 네이티브 성능: 네이티브 API를 사용하여 성능을 높임
  3. Hot Reloading: 코드 변경 시 즉시 결과를 확인할 수 있음
   

Node.js (백엔드)

• 정의 : Node.js는 자바스크립트로 백엔드 시스템을 구축할 수 있는 환경, 서버 사이드 자바스크립트를 사용하여 비동기 이벤트 기반 프로그래밍을 지원
• 주요 특징:
  1. 통합된 자바스크립트: 프론트엔드와 백엔드에서 자바스크립트를 사용하여 코드의 재사용성을 높임
  2. 경량 프레임워크: Django와 같은 프레임워크보다 가볍고 유연함
  3. 비동기 처리: 이벤트 기반 비동기 처리를 통해 높은 성능을 발휘
   

React Native 이전의 앱 개발

• 안드로이드:
  1. Java: 오래된 기본 언어로, 안드로이드 앱 개발에 널리 사용됨
  2. Kotlin: 최신 안드로이드 앱 개발에 추천되는 언어로, 더 간결하고 안전한 코드 작성이 가능
• iOS:
  1. Swift: 현대적인 iOS 앱 개발에 사용되는 언어로, 높은 성능과 안전성을 제공
  2. Objective-C: 기존의 iOS 앱 개발에 사용되던 언어로, 여전히 많은 레거시 코드에서 사용됨

React Native의 모토

• "한 번 배우고 여러 곳에서 사용한다": React Native의 핵심 모토는 한 번의 코드 작성으로 여러 플랫폼에서 재사용할 수 있는 것, 이를 통해 개발자들은 크로스 플랫폼 앱을 빠르고 효율적으로 개발할 수 있음

추가 자료

• Snack by Expo: 별도의 프로그램 설치 없이 웹에서 React Native 코드를 실행하고 테스트할 수 있는 플랫폼, 개발자들이 코드 작성과 실시간 피드백을 쉽게 할 수 있음

---

Component

• 정의
  1. 리액트는 UI를 구성하는 단위로 컴포넌트를 사용한다
  2. 각 컴포넌트는 독립적으로 동작하며, 다양한 컴포넌트를 조합하여 복잡한 애플리케이션을 구축할 수 있다
  3. 컴포넌트는 HTML, CSS, 자바스크립트가 결합된 형태로 UI를 구성한다
• 코어 컴포넌트: 리액트 네이티브에서 제공하는 기본 컴포넌트로, View, Text, Image, ScrollView, TextInput 등이 있다 이들 컴포넌트는 플랫폼에서 공통적으로 제공되는 UI 요소를 구성한다
• 커스텀 컴포넌트: React.Component를 상속하여 새로운 컴포넌트를 정의할 수 있다. 이를 통해 재사용 가능한 UI 요소를 만들고, 필요에 따라 기능을 확장할 수 있다. 예를 들어, 버튼이나 입력 폼을 직접 구현할 수 있다

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

class MyButton extends React.Component {
  render() {
    return (
      <View>
        <Button title={this.props.title} onPress={this.props.onPress} />
      </View>
    )
  }
}

JSX

• 정의
  1. JSX는 자바스크립트 코드 내에서 HTML과 유사한 문법을 사용할 수 있게 해주는 확장 문법이다
  2. JSX를 사용하면 UI를 선언적으로 작성할 수 있으며, 자바스크립트의 동적 기능을 활용할 수 있다
  3. JSX는 컴파일 시 자바스크립트의 React.createElement 호출로 변환된다

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

function App() {
  return (
    <View>
      <Text>This is a JSX Example</Text>
    </View>
  )
}
export default App

Props

• 정의
  1.  Props는 컴포넌트에 전달되는 속성이다 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용된다
  2. Props는 읽기 전용이고 컴포넌트의 외부에서 설정된 값을 전달받아 사용한다
• 특징: Props는 컴포넌트의 생애 주기 동안 변경되지 않으며 컴포넌트가 렌더링될 때 전달된 값이 그대로 유지된다. 이를 통해 컴포넌트 간의 데이터 전달과 UI 구성에 유용하다

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

function Greeting(props) {
  return (
    <View>
      <Text>Hello, {props.name}!</Text>
    </View>
  )
}
export default Greeting

State

• 설명:
  1. State는 컴포넌트의 내부 상태를 관리하는 데 사용된다
  2. 상태는 컴포넌트 내에서 변할 수 있는 데이터로, 사용자의 입력이나 기타 동작에 따라 변경될 수 있다
  3. State는 컴포넌트의 생애 주기 동안 변경될 수 있으며, 상태가 변경되면 컴포넌트가 다시 렌더링된다
• 차이점: Props는 외부에서 전달되는 값으로 읽기 전용이며, 변경할 수 없다. 하지만 State는 컴포넌트 내부에서 관리되고 데이터가 변할 때 컴포넌트의 UI가 자동으로 업데이트된다

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

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  )
}
export default Counter