[0803] React Native 강의 정리

  좋은 기회가 생겨 React Native를 공부하고, 강의를 듣게 되었다. Notion에 필기를 하며 듣기로 했기 때문에 틈틈이 기록한 내용을 블로그에 백업하기로.

 

---

Section 2 : Working with Content

• Component : 사용자에게 content를 보여주기 위해 사용. → 프로젝트 내 여러 파일을 통해 만들어짐.
• 컴포넌트 파일의 구성
  1. 컴포넌트를 만드는 데에 필요한 라이브러리를 Import.
  2. 'JSX'를 반환하는 함수를 통해 컴포넌트 생성.
  3. 컴포넌트에 대한 StyleSheet 작성.
  4. 프로젝트 내에서 사용할 수 있도록 컴포넌트를 Export.

import React from 'react';
//react 라이브러리 전체를 가져오기 위해
import { Text, StyleSheet } from 'react-native';
//react-native 라이브러리에서 오직 Text와 StyleSheet만 가져오기 위해 {} 사용

//아래 두 코드는 아무 차이 없음
const Screen = function() {
	//일반적인 함수 선언문 사용
};

const Screen = () => {
	//화살표 함수 사용
};

//--------------------------------------------------------

//StyleSheet 를 생성하는 코드.
//StyleSheet는 StyleSheet.create로 생성 가능

const styles = StyleSheet.create({
    textStyle: {
        fontSize: 30,
    }
});

const Screen = () => {
		//생성한 StyleSheet를 적용함.
    return <Text style={styles.textStyle}>This is the screen</Text>;
};

→ 만든 컴포넌트를 사용하기 위해서는 사용하려는 JS에서 import를 해야함.

 

• StackNavigator : 화면에 어떤 컨텐츠를 띄울지 정함.
  → initialRouteName : 첫번째로 보여질 컴포넌트가 어떤 것인지 정해줌.
• 예시 코드 내의 이모저모
  1. Text : Primitive react element (원시 리액트 element?)
  → 리액트 네이티브 라이브러리에 의해 제공됨.
  2. JSX : HTML처럼 생긴 코드. 기술적으로 유효한 Javascript는 아니라서, Terminal 내의 React Native Bundler가 Babel이라는 걸 통해 Javascript 코드로 변환시킴.
  → 실제로 이 변환과정은 babeljs.io 에서 확인해볼 수 있음.
  → 일반 JS를 사용하면 모든 것을 함수구문으로 작성하는 과정에서 변경이나 수정 등이 어려워지기 때문에, JSX를 사용함.
  3. React Navigation : 사용자에게 여러 화면을 보여주기 위해 사용됨(?).
  4. styles : StyleSheet.create()에 넘긴 스타일 규칙을 확인함. 이걸 안 쓰고 Element 내에 직접 스타일을 전달할 수도 있음.

const styles = StyleSheet.create({
    textStyle: {
        fontSize: 30,
    }
});

const Screen = () => {
	//생성한 StyleSheet를 적용함.
    return <Text style={styles.textStyle}>This is the screen</Text>;
};

//------------------------------

const Screen = () => {
	//Element 내에 직접 스타일 전달
    return <Text style={{ fontSize: 30 }}>This is the screen</Text>;
};

 

Primitive React Element
1. Text
2. View : 여러 Element들을 그룹으로 묶을 수 있는 Element.
3. Image : 이미지를 나타냄.
4. Button
→ 이 외에도 다양한 Element 들이 존재.

 

• JSX 규칙
  1. 서로 다른 JSX element들을 일반적인 HTML처럼 합칠 수 있음.
  2. 서로 다른 JSX element들을 props를 통해 설정? 할 수 있음.
  3. JSX 블록 안에 {}를 사용하여 JS 변수들을 사용할 수 있음.
  → 다만, Text element 안에서 JS 변수를 사용할 때 객체는 사용할 수 없음(배열은 됨).
  4. 변수에 JSX element를 할당할 수 있으며, JSX 블록 안에서 해당 변수를 보일 수 있음.
  
  
• 자주 나오는 에러 : return 문 다음 줄에 반환하려는 태그를 넣는 것.
  → Javascript에 의해 해석되며 아무것도 반환하지 않는 것처럼 인식됨.

//ex
const Screen = () => {
//이 밑은 오류남.
    return // return; 으로 해석
		<View>
        	<Text style={styles.textStyle}>This is the screen</Text>
    	</View>
};