JSX 소개

JSX 

Javascript에서 html 코드를 그대로 작성 

xml 문법을 Native Javascript 문법으로도 해결 

ReactDOM : 실제 페이지에 JSX코드를 Rendering할 때 사용

모든 JSX코드는 Component ( Container element )에 포함 시키기 

React.Componenet를 상속받는 클래스를 만들고 내부에 render() {   } 를 해준다.

return 이 후 엔 소괄호로 묶어주는데, 가독성을 위해 하는 것이니 해주길 바랍니다.

내부에는 html태그로 정리할 수 있습니다. 

여기서 'Haamseongho' 라는 단어를 div 태그로 감싸줬는데 반드시 div 태그든 어떠한 것이든 감쌀 수 있는 태그로 감싸줘야 합니다.

<첫 번째 특징>

(Nested Element) == Container Element에 포함시켜야 한다는 것 

: (예) <div/> 태그로 감싸기 

앞서 보여준 내용을 다른 표현으로 하면 아래와 같이 표현할 수 있습니다. 

JSX 두 번째 특징인데, 자바스크립트 표현 문법은 { } 중괄호 태그 내에 표현되어야 한다는 것입니다.

<두 번째 특징>

자바스크립트 표현 문법은 { } 중괄호 태그 내에 표현되어야 한다.

* 참고로 let은 한 번 선언하면 다시 선언할 수 없으며 블록 단위의 사용 범위를 가지고 있습니다. (es6 문법) * 

let 범위가 중괄호 블록 내부 이기 때문에 render 괄호 내에 선언을 하였고, 

name과 style을 각각 선언을 해주게 됩니다. 

그 이 후에 반환할 return 부분에서 style에 style 변수를 , 값이 나올 부분에 name 변수를 { } 내부에 표현하게 된다.

그렇게 하면 in-line style로 css문법이 사용될 것이며 , 'Haamseongho3' 이라는 단어가 입력될 것입니다.

App 클래스에서는 마찬가지로 React.Component 를 상속시키도록 한다.

App 클래스를 통해서 Haams 클래스를 불러올 것이며 해당 내용을 ReactDOM

태그를 통하여 rendering 할 것 입니다.

다음과 같이 App 클래스에서 render할 내용을 Haams 태그 (클래스도 태그로 표현)

로 하여 반환한다.

ReactDOM으로 App 태그 (App 클래스)를 선언하여 rendering 해주는데, 어디다 보여줄 것인지에 대한 정보는 두 번째 인자에 입력해 준다.

보여줄 Html 부분 (View단) 에서 id 값으로 찾아 접근하여 보여주도록 한다.

이렇게 하면 아래와 같은 결과가 나오게 됩니다.

이상 기본 JSX 문법과 작동 방식에 대해서 설명드렸습니다.  감사합니다.