S_dobby App개발 base Page, 고정 가변 텍스트와 버튼 만들기

웹에서 Node.js / cmd로 Expo를 깔고,

npx create-expo-app Sdobby_App

편집용으로 웹에서 VScode까지 깔았다면
 

JavaScript 런타임, Node.js 설치 및 Shell 종류 비교

Expo 설치 프로젝트 생성 후 npm 실행해 QR 코드로 나의 첫 앱 접속

VScode 설치 및 Explorer 설정 후 index.tsx열기 feat. Javascript

 

이제 본격적으로 앱 개발을 할 때가 됐습니다.
C:\Users\~~~\Sdobby_App\app\(tabs)
혹시 위 폴더 안에 .tsx파일을 포맷하고 싶다면
App폴더 지우고 cmd에서 위 npx~ 명령어로 재설치!!
cmd에 App 경로 가서, npm start해 w눌러 웹 편집
 

 
오늘 만들어볼 첫 앱 개발 프로젝트는
option 1. 고정텍스트로
Hello, world! First App made by S_dobby🚀
option 2,3. '버튼'으로 연결된 '가변텍스트'
Hi !! 👋 에서 버튼을 누르면 Bomb! 🎉
 
위 화면 하단에 보면, 원래 Home과 Explorer
2개의 텝만 있었는데, test라고 하나를 추가했습니다.
추가하는 방법은 간단한데,,
 

 
C:\Users\~~~\Sdobby_App\app\(tabs)
위 (tabs) 폴더 안에 index.tsx의 사본을 만들고
이름을 test.tsx로 변경했구요, 안에 내용을 싹~
지운 뒤, 아래 코드를 붙여넣고 저장(Ctrl+s)
이제 버튼을 누르면 텍스트가 변하는
위와 같은 기능이 구현됩니다.
코드를 한번 살펴보자면..
 

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

export default function HomeScreen() {
  // opt 2. 가변 텍스트
  const [var_txt, set_var_txt]=useState("Hi !! 👋");
  // opt 3. 버튼
  const press_btn=() => {set_var_txt("Bomb! 🎉")};

  return (
    <View style={styles.container}>
      {/* opt 1. 고정 텍스트 */}
      <Text style={styles.Title}>Hello, world! First App made by S_dobby🚀</Text>
      
      {/* opt 2. 가변 텍스트 */}
      <Text style={styles.var_txt}>{var_txt}</Text>

      {/* opt 3. 버튼 */}
      <Button title="push the Button" onPress={press_btn} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: '#fef6e4', alignItems: 'center',
    justifyContent: 'center', paddingHorizontal: 20},
  
  Title: {fontSize: 22, fontWeight: 'bold', marginBottom: 40, textAlign: 'center'},
  
  var_txt: {fontSize: 20, marginBottom: 20},
});

 
파이썬을 어느정도 할 줄 안다면, JavaScript도
대충 윤곽은 눈에 들어오네요.
모듈 import하고, 다음 포스팅에 JavaScript의
기본 문법들을 정리하겠지만, const는 변수 선언
return으로 내용, 기능 등의 백엔드를
 
밑에 const styles에서는 폰트 사이즈, 색깔 등
실제 보여지는 디자인을 정의하는 프론트엔드
CSS(Cascading Style Sheets) 같은 부분이죠.
티스토리의 'HTML 편집'과도 비슷한 구조지요..
 
그리고 또 한가지 주석을 넣는 방식이 특이한데,,
보통은 // 하고 뒤에 주석을 달아도 되는데
JSX 안에서는 {/* ~~ 주석 ~~ */} 이런 식으로
좀 복잡합니다.. 파이썬은 걍 # 붙이면 끝인데,,
앞으로 그냥 {/* ~~ 주석 ~~ */} 이거만 쓰는걸로..
 
JSX는 또 뭐냐,, JavaScript XML의 약자로

JavaScript 안에서 HTML을 작성하게 하는 문법
JS 안에서 쓰는 XML처럼 생긴 문법(실제 XML 처리X)

위에서는 <View  ~ </View>로 끝나는 부분인데
이것도 마치 티스토리 HTML 편집의
<Header> <Post> <Footer> 같은 구조 블록으로
'컴포넌트'의 개념입니다.

** eXtensible Markup Language : 확장 가능한 마크업 언어
** Component : 요소, 부품

 
JS가 처음이라 위처럼 간단한 코드에도
Hook, 함수표현식 등 설명할게 많은데,,
싹~ 모아서 다음 포스팅에~
To be continued...
 
🍪🍪🍪
구조 블록 Component의 종류들

컴포넌트	설명
레이아웃
View	HTML의 div 같은 느낌. 레이아웃, 박스 컨테이너
ScrollView	스크롤 가능한 View
SafeAreaView	아이폰 notch 같은 영역 피해서 표시
FlatList	리스트 데이터 (스크롤 + 성능 좋음)
SectionList	그룹으로 나뉜 리스트
KeyboardAvoidingView	키보드가 올라올 때 뷰 밀어주는 용도
텍스트/입력
Text	텍스트 출력
TextInput	사용자로부터 텍스트 입력 받기
Button	기본 버튼 (커스터마이징 제한 있음)
Pressable	사용자 터치 감지 (커스터마이징 자유도 높음)
TouchableOpacity, TouchableHighlight	터치 가능한 컴포넌트 (터치 시 반응 효과 있음)
이미지
Image	이미지 표시
ImageBackground	배경 이미지로 뷰를 감싸기
Video (추가 라이브러리 필요)	영상 플레이
ETC..
Modal	팝업 창 표시
ActivityIndicator	로딩 스피너
Alert	알림창 (iOS/Android 기본 UI 사용)
StatusBar	상태 바 스타일 설정 (예: 어두운 배경이면 밝은 글씨 등)

 
XML과 HTML의 차이,, 대충 한번 보세요.
그냥 비슷한거라고 알고 넘어가겠습니다..

항목	XML	HTML
목적	데이터 저장/전송	웹페이지 표시
유연성	태그를 직접 만들 수 있음	정해진 태그(<div>, <p> 등)만 사용
형식	엄격함 (열면 닫아야 함, 들여쓰기 중요)	조금 느슨함
사용처	API 응답, 데이터 교환 (옛날 웹서비스 등)	웹사이트 UI