아토믹데브_4_취업 준비생을 위한 모바일 게임 개발 여정

제4강: React Native/Flutter 기본 구조 이해

---

학습 목표:

이번 강의에서는 React Native 또는 Flutter를 사용해 모바일 애플리케이션을 개발하기 위한 기본 구조와 핵심 컴포넌트를 이해하는 것이 목표입니다. 여러분은 React Native의 JSX 구조 및 컴포넌트에 대해 배우거나, Flutter의 위젯 시스템을 이해하게 될 것입니다. 또한, 상태 관리(State Management)와 props 개념을 학습하고, 간단한 UI 컴포넌트를 생성하는 실습을 통해 학습한 내용을 적용해볼 것입니다.

---

1. React Native의 JSX 구조 및 컴포넌트 소개

1.1 JSX란 무엇인가?

JSX(JavaScript XML)는 React Native에서 사용하는 특별한 문법으로, JavaScript 코드 안에서 HTML과 유사한 구조를 작성할 수 있게 해줍니다. JSX는 JavaScript 코드와 UI 요소를 결합하여 보다 직관적인 개발을 가능하게 합니다.

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

const MyComponent = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};

export default MyComponent;

위의 예제에서 View와 Text는 React Native의 기본 컴포넌트입니다. JSX를 사용하면 이러한 컴포넌트를 HTML 태그처럼 작성할 수 있습니다.

1.2 React Native 컴포넌트 구조

React Native 애플리케이션은 여러 컴포넌트로 구성됩니다. 컴포넌트는 UI를 구성하는 기본 단위로, 화면에 표시되는 모든 요소는 컴포넌트로 구현됩니다. 컴포넌트는 크게 두 가지로 나뉩니다:

• 클래스형 컴포넌트: 상태와 라이프사이클 메서드를 사용하는 컴포넌트입니다.
• 함수형 컴포넌트: 더 간단하게 상태 없는 컴포넌트를 작성할 때 주로 사용되며, React의 useState, useEffect 같은 훅(Hooks)을 사용해 상태와 라이프사이클을 처리할 수 있습니다.

---

2. Flutter의 위젯 시스템 이해

Flutter에서 모든 것은 위젯으로 표현됩니다. 위젯은 UI 요소를 구성하는 기본 단위로, Flutter의 앱 화면에 표시되는 모든 것이 위젯으로 구현됩니다.

2.1 Flutter 위젯의 기본 구조

Flutter의 위젯은 계층 구조로 이루어져 있습니다. 하나의 위젯은 여러 자식 위젯을 가질 수 있으며, 각 위젯은 자신만의 레이아웃과 스타일을 정의합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello, World!'),
        ),
        body: Center(
          child: Text('Welcome to Flutter'),
        ),
      ),
    );
  }
}

 

위의 예제에서 Scaffold, AppBar, Text 등은 모두 Flutter의 기본 제공 위젯입니다. Scaffold 위젯은 앱의 기본 레이아웃 구조를 제공하며, AppBar와 Body 부분으로 나눠집니다.

2.2 Flutter의 상태 관리

Flutter에서 상태 관리는 위젯의 상태 변화에 따라 UI를 업데이트하는 중요한 역할을 합니다. 상태를 관리하는 방법에는 여러 가지가 있지만, 가장 기본적인 방법은 StatefulWidget을 사용하는 것입니다.

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

이 예제에서는 StatefulWidget을 사용하여 버튼 클릭 시 카운터가 증가하는 간단한 상태 관리 애플리케이션을 구현했습니다.

---

3. 상태 관리(State Management) 및 props 개념 학습

React Native와 Flutter 모두 상태 관리가 중요합니다. 상태는 컴포넌트의 현재 상태를 의미하며, 사용자 입력이나 다른 이벤트에 따라 상태가 변경될 수 있습니다.

3.1 React Native의 상태 관리 및 props

React Native에서 상태는 useState 훅을 사용하여 관리할 수 있으며, props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다.

javascript

코드 복사

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

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default MyComponent;

 

3.2 Flutter의 상태 관리 및 props

Flutter에서는 StatefulWidget을 사용해 상태를 관리하며, props는 위젯 간에 데이터를 전달하는 역할을 합니다.

class MyButton extends StatelessWidget {
  final Function onPressed;

  MyButton({required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => onPressed(),
      child: Text('Increment'),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Count: $_counter'),
            MyButton(onPressed: _incrementCounter),
          ],
        ),
      ),
    );
  }
}

 

---

4. 간단한 UI 컴포넌트 생성 실습

이제 학습한 내용을 바탕으로 간단한 UI 컴포넌트를 생성해보겠습니다. UI 컴포넌트는 사용자와의 상호작용을 담당하는 요소입니다.

4.1 React Native 예제

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

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

const App = () => {
  return (
    <View>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </View>
  );
};

export default App;

 

4.2 Flutter 예제

import 'package:flutter/material.dart';

class Greeting extends StatelessWidget {
  final String name;

  Greeting({required this.name});

  @override
  Widget build(BuildContext context) {
    return Text('Hello, $name!');
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Greeting(name: 'Alice'),
            Greeting(name: 'Bob'),
            Greeting(name: 'Charlie'),
          ],
        ),
      ),
    ),
  ));
}

 

 

이 실습을 통해 간단한 UI 컴포넌트를 생성하고, 사용자와의 상호작용을 처리하는 방법을 익힐 수 있습니다.