[React] 272샘의 React6 (JSX)

 

 

https://deahan.tistory.com/425

[React] 272샘의 React5 (개발 폴더 파일 구조)

에서 사용했던 아래 코드를 다시 한번 눈여겨 보자

[ 이번 글은 짧은 짤 정도니,  휘리릭 달리고, 그냥 생각만 해보자]

 

function MyComponent() {

  return (

    <div style={{ border : "4px solid pink"}}>

        <h1>흑백개발자 코드전쟁</h1>

        <h2>E7E백개발자!! 미눅스 흑개발자!!</h2>

        <h2>1:1 보류!!!</h2>

    </div>

  )

}

 

return 뒤에 html태그가 온게 본능적으로 눈에 거슬리면서 아름답다고 7e샘이 그랬음

자바스크립트안에 문자열이 아닌 html태그가 올 수 있었던가?

그렇지 않다.  그래서 html문자열이면서 html이 아니다.

 

그래서 이것을 JSX(Javascript Syntax eXtension 자바스크립트 문법확장)이라 부른다.

html인데 html이 아니라니...

자바스크립트 안에 태그를 직접 쓰는 건 원래 안된다.

(그러니까 위의 코드는 실행이 안되는 자바스크립트 코드다!)

 

아래 사이트를 방문해서 Try it out 메뉴를 아래 그림처럼 클릭!!.

https://babeljs.io/

 

왼쪽에 return 되는 html를 코드를 붙이면, 오른쪽에 보이는 코드로 바뀐다.

이 말이 뭐냐면 html처럼 보이는 태그 마크업이 그대로 실행되는 것이 아니고,

스크립트 코드로 바뀌는 것. 요걸 해주는 애가  babel.js란 라이브러리다

node_modules 폴더를 열어보면 babel이 들어있을것이다.

 

React에선 Babel이 JSX를 해석해서, 아래 처럼  React.createElement를

불러주도록 되어 있고, 여기서 객체(React Element라 부름)가 생성되어 리턴된다

 

const elem = React.createElement(

  'h1',

  {className: 'greeting'},

  '안녕,멋진 기획자 경민아!!'

);

 

위의 elem의 구조를 아주 억지로 단순화 시키면, 아래 처럼 되는뎅

나중에 알게 되니.., 지금은 저 따위 것들이 있구낭 생각만 하자

 

const element = {

  type: 'h1',

  props: {

    className: 'greeting',

    children:'안녕,멋진 기획자 경민아!!'

  }

};

 

지금은 느낌이 안 오지만 사용할 수는 있는 결론을 짓자면

JSX는 필수는 아니지만 필수다.... 

이미 바로 쓸 수 있는 상태로 개발환경이 구축되어 나오니

안 쓸 이유가 없고, 쓰면 쓸수록 느낌오고 편하다. (그냥 쓰자!!)

 

단지 이게 html처럼 보이지만 html이 아니어서, 

기존 알던 html문법과 차이나는 부분들이 나타나기 시작할것이다..

그때 그냥 머리속에  "아 이건 html아니고 jsx였지라고 되새기자" 

 

App.jsx의 소스를 다시한번 보자!!. <MyComponent />가 HTML인가?

아니다!  JSX다!!

 

function App() {

  return (

    <div>

      <h1>e7e만세 minux 만만세</h1>

      <MyComponent />

      <MyComponent />

      <MyComponent />

    </div>

  )

}

 

헉! 어느새 민우의 실력은 상당하다!. 부럽고 부럽다고 e7e샘이 그랬다!!!

 

TIP. 혹 vscode 화면 오른쪽 아래가 아래 그림처럼 JavaScript JSX가 아니고

JavaScript로 되어있다면, 그렇다면 클릭하고, 아래 그림처럼 선택 따라하고,

영어로 되어있다면 이것

 

텍스트 박스에 javas 라고 치면 2개 보이는데, 아래 그림처럼 선택하면 된다..

이렇게 설정 해야 자바스크립트 안에서 태그 자동완성을 문제없이 쓸 수 있다.(오케이!!)

 

출처 : https://e-7-e.tistory.com/254