2021.09.11

JSX = Javascript + XML

Javascript와 XML구문을 결합해 사용하는 코드를 JSX 라고한다.

자바스크립트 표준에 JSX 구문이 없지만, 포함된 것 처럼 동작할 수 있는 이유는 ESNext 자바스크립트 컴파일러인 바벨(babel)이 플러그인 구조로 동작하기 때문이다,

바벨은 ESNext 자바스크립트 코드를 만나면 파이프라인 형태로 동작하여 이해할 수 있는 구문만 컴파일하여 자바스크립트로 변환한다.

페이스북은 JSX 구문을 컴파일 하고자 @babel/plugin-trnasform-react-jsx 라는 바벨 플러그인을 제공한다.

 

jsx 구문이 있는 타입스크랍트 코드는 .tsx 여야하며, 다음 임포트 문이 필요하다.

import React from 'react'

 

React.createElement 사용은 아래의 형태로 구현하는데, 이를 JSX 형태로 변환해보자.

Virtuala_DOM_Object = React.createElement(component_name, attribute_object, child_component)

<component_name>child_component</component_name> // JSX

그러므로 JSX 객체는 실제로는 createElement를 호출하는 것이다.

 

표현식과 실행문 그리고 JSX

 

표현식 : 1, true, "Hello World!"처럼 값으로 평가되는 어떤 것.

실행문 : if, switch/case, for 같은 그 자체로는 값이 아닌 것.

 

JSX문 안에서는 실행문을 사용하면 오류가 발생한다.

<SafeAreaView>

{console.log("test")} // error

</SafeAreaView>



<SafeAreaView>

if (isLoading) {

do something.. // error

}

</SafeAreaView>

 

오류가 발생하는 이유는 JSX 코드를 구성하는 한줄 한줄이 모두 React.CreateElement 호출 코드로 변환되어야 하는데, console.log는 변환이 불가능하므로.

 

오류를 해결하는 방법으로는 이러한 구문을

+ JSX 문 바깥에 두는 방법

+ 조건문을 단축 평가 코드로 바꿔 문제 해결

ex)

<SafeAreaView>

{isLoading && <Text>loading</Text>}

{!isLoadiong && <Text>Hello World!</Text>}

</SafeAreaView>

+ JSX 문을 변수에 담아 문제 해결

ex)

const children = isLoading ? (

<Text>loading..</Text>

) : (

<Text>Hello World!</Text>

)

 

컴포넌트와 속성 이해하기

faker 외부 패키지 : 가짜 데이터를 만드는 패키지

자바스크립트로 만들어진 패키지이므로, 타입스크립트에서 사용하려면 @types/faker 타입 라이브러리 사용

 

사용자 컴포넌트

객체지향 프로그래밍에서 컴포넌트는 UI를 담당하는 클래스를 의미합니다.

오랫동안 리액트와 리액트 네이티브 프레임워크에서는 객체지향 방식인 클래스 컴포넌트를 사용했습니다.

 

그러다 함수로 구현되는 함수 컴포넌트가 도입되었고, 버전 16.8 에서 리액트 훅 기능이 새로 도입되면서 함수 컴포넌트 + 리액트 훅을 사용할것을 장려하고 있습니다.

 

클래스 컴포넌트

 

반드시 Component 클래스를 상속 받아야한다.

render method는 반드시 null, undefined, React.createElement 호출로 얻은 반환값이나 JSX 문 중 하나를 반환해야한다.

 

화살표 방식 함수 컴포넌트

 

클래스 컴포넌트의 render 메소드는 함수형 컴포넌트에서는 함수 몸통에 구현하면된다. (같은 역할을 한다.)

요즘 많이 사용되는 리액트 훅을 사용할 수 있다. (클래스 컴포넌트는 사용할 수 없음.)

 

속성이란?

속성이란 클래스의 멤버변수를 의미한다.

재렌더링이란 리액트와 리액트 네이티브에서 바뀐 속성값을 화면에 반영하는 것을 의마한다.

리액트와 리액트 네이티브에서 속성은 클래스 속성 + 재렌더링을 의미한다.

 

 

이제서야 함수형 컴포넌트와 클래스 컴포넌트 구분할 수 있겠다.... 화이팅하자