[RN] JSX 문법 _ 처음 배우는 리액트 네이티브 (24.05.08)

컴포넌트, 와이어프레임

• 컴포넌트(component): 재사용할 수 있는 조립 블록으로 화면에 나타나는 UI 요소
• 와이어프레임(wireframes): 최종 화면에 구성될 콘텐츠를 간단히 요약해 보여주는 것

JSX 문법

• JSX: 자바스크립트 파일 안에 HTML과 같은 마크업 언어처럼 쓸 수 있게 해주는 자바스크립트를 확장한 문법
           리액트 컴포넌트는 마크업을 표현하기 위해 JSX라 불리는 확장 문법을 사용한다. rendering logic and                           markup을 한 공간, 즉 컴포넌트 안에서 같이 해 준다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

 

1.  하나의 부모

 

여러개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야 한다. 

export default function App() {
	return (
    	<View style={styles.container}>
        	<Text> 리액트 공식문서에도 나와 있어요!</Text>
    		<StatusBar style="auto">
        </View>
    );
}

 

이때, <View>는 웹 프로그래밍에서 <div>태그와 유사한 역할을 하며 <View> 대신에 empty tag를 사용해도 된다.

=> <> </> : Fragment  == <Fragment></Fragment> 

 

2. 자바스크립트 변수

 

JSX는 내부에 자바스크립트의 변수를 전달하여 이용할 수 있다. 

그 전에 js의 변수 선언 방식을 보자면...

var (가장 오래 됨)	함수 레벨 스코프, 중복 선언 가능, 재할당 가능, 호이스팅
let	블록 레벨 스코프, 중복 선언 불가, 재할당 가능
const	블록 레벨 스코프, 중복 선언 불가, 재할당 불가, 상수

- 함수 레벨 스코프: 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.

  함수 내부의 변수는 지역변수, 함수 외부의 변수는 모두 전역변수

- 블록 레벨 스코프: 모든 코드 블록 내에서 선어뇐 변수는 코드 블록 내에서만 유효하며 블록 외부에서는 참조할 수 없다.

   코드 블록 내부의 변수는 모두 지역변수

- 호이스팅(Hoisiting): 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것이다.

   var 변수/함수의 선언만 위로 끌어 올려질 뿐, 할당은 끌어 올려지지 않는다.

 

https://poiemaweb.com/es6-block-scope

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

 

export default function App() {
	const name = "Hailey";
    return (
    	<View style={styles.container}>
        	<Text style={styles.text}>My name is {name}</Text>
        	<StatusBar style="auto" />
        </View>
    );
}

 

3. 자바스크립트 조건문

 

1. if 조건문

자바스크립트의 조건문은 c언어, 자바와 형태가 동일하다. 그렇기 때문에 if~ else if ~ else 구조를 따르는데 자바스크립트에 익숙하지 않는 사람은(=나) 연산자를 조심해야 한다.

• == , === 연산자 -  두 값을 비교하여 같으면 true, 다르면 false

==  (Equal Operator; 비교 연산자)	두 피연산자의 값이 서로 타입이 다를 경우, 자동으로 일부 피연산자의 타입을 변환한 후에 값을 비교한다.
=== (Strict Equal Operator; 엄격한 비교 연산자)	두 피연산자 값의 타입이 서로 다르더라도 변환하지 않고 있는 그대로의 값을 비교한다.

100 == '100' // true
100 === '100' // false

1 == true // true
1 === true // false

null == undefined // true

(편의상 console.log()는 생략한다. )

 

https://tmdrnr96.tistory.com/27

• 화살표 함수 (feat.chatGPT)

나한테 가장 어려운 자바스크립트 부분이다. 람다, 익명함수, 화살표 함수 등을 볼 때 아 그렇구나~ 하고 넘어가서 그런가 참 볼 때마다 새롭다. 화살표 함수는 ES6에서 추가된 새로운 함수 정의 방식인데 말 그대로 화살표를 이용하여 함수를 간결하게 작성하는 것이다.  인수가 하나도 없을 때엔 괄호를 비워두는데 이때 괄호를 생략할 수는 없다. 

// 일반적인 경우
function add(a,b) {
	return a + b;
}

// 화살표 함수
const add = (a,b) => {
	return a + b;
}

// 단일 표현식일 경우 중괄호 없이, return 없이 작성 가능
const add = (a,b) => a + b;
add(3,5);

 

아래는 화살표 함수를 정의하고 즉시 호출하는 코드이다. (() => {})()

export default function App() {
	const name = "Hailey";
    return (
    	<View style={styles.container}>
        	<Text style={styles.text}>
            	{(() => {
                if (name === 'Hanbit') return 'My name is Hanbit';
                else if (name === 'Hailey') return 'My name is Hailey';
                else 'My name is RN';
                })()}
                }
            </Text>
            <StatusBar style="auto" />
        </View>
    );
}

https://ko.javascript.info/arrow-functions-basics

 

2. 삼항 연산자

이것도 마찬가지로 a ? b : c 를 활용하면 된다. 간단하니 빠르게! {name === 'Hailey' ? 'Hail2y' : 'RN'} 

 

3. AND 연산자, OR 연산자

 

일반적인 논리 연산자가 그렇듯 and 연산자는 피연산자들이 모두 true일 때만 true를 반환하고, or는 피연산자들 중 true가 하나라도 있다면 true를 반환한다. 하지만 여기서 끝났다면 헷갈리지 않았겠지... 이제부터는 자바스크립트에서만 제공하는 특별한 기능이다. 먼저 or부터!

• 첫 번째 truthy를 찾는 or 연산자

result = value1 || value2 || value3;

or 연산자와 여러 개의 피연산자들이 있을 때 다음 순서로 연산이 진행된다.

 

1. 왼쪽부터 오른쪽으로 피연산자들을 평가한다.

2. 각 피연산자들을 불리언 타입으로 변환하여 true이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.

3. 만약 모든 피연산자들이 false라면 마지막 피연산자의 값을 반환한다. 

 

+ 단락 평가(short circuit evaluation): 왼쪽부터 오른쪽으로 피연산자들을 평가할 때 truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 중단한다. 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰인다고 한다.

let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert( firstName || lastName || nickName || "익명"); // 바이올렛

true || alert("not printed"); // alert 실행되지 않음
false || alert("printed"); // printed

alert( alert(1) || 2 || alert(3) ); // 2
// alert 메서드는 undefined를 반환한다.

• 첫 번째 falsy를 찾는 and 연산자

result = value1 && value2 && value3;

and 연산자와 여러 개의 피연산자들이 있을 때 다음 순서로 연산이 진행된다.

 

1. 왼쪽부터 오른쪽으로 피연산자들을 평가한다.

2. 각 피연산자들을 불리언 타입으로 변환하여 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.

3. 만약 모든 피연산자들이 true라면 마지막 피연산자의 값을 반환한다. 

 

alert( 1 && 2 && null && 3 ); // null
alert( 1 && 2 && 3 ); // 마지막 값, 3

 

+ NOT 연산자 !

곰곰히 생각하면 아- 그렇구나 수준으로 넘길 수 있지만 이런 것도 있구나를 파악하기 위하여 적는다.

not 연산자를 두 개 연달아 사용하면 값을 불리언 타입으로 변환할 수 있다. 참고로 !! == Boolean()

alert( !!"non-empty string" ); // true
alert( !!null ); // false

alert( Boolean("non-empty string") ); // true
alert( Boolean(null) ); // false

 

https://ko.javascript.info/logical-operators

 

4. null과 undefined

 

JSX는 반환값으로 null과 undefined가 올 때, null을 허용하지만 undefined는 오류를 발생시킨다.

 

5. 주석

 

JSX의 주석은 {/**/}를 이용해서 작성하되 태그 안에서 주석을 사용할 때는 자바스크립트처럼 //나 /**/를 사용할 수 있다. 

export default function App() {
	const name = "Hailey";
    return (
    	<View style={styles.container}>
            {/* <Text>안녕</Text> */}
            <Text /* style={styles.text} */>My name is {name}</Text>
            <Text
            // style={styles.text}
            >하이</Text>
            <StatusBar style="auto" />
        </View>
    );
}