React(리액트) 티키타카 6 (JSX)

2024.09.27 - [자바스크립트] - React(리액트) 티키타카 5 (개발 폴더 파일 구조)

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

[ 이번 글은 짧은 짤 정도이닝,  휘리릭 달리공, 그냥 생각만 해보장]

function MyComponent() {
  return (
    <div style={{ border: "4px solid pink" }}>
      <h1>흑백개발자 계급전장</h1>
      <h2>E7E 좋앙! 미누 시롱!</h2>
      <h2>근데 2:0 미누 승</h2>
    </div>
  );
}

return 뒤에 html태그가 온게 본능적으로 눈에 거슬리면서 아름답당.

자바스크립트안에 문자열이 아닌 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 은퇴를 부른당</h1>
      <MyComponent />
      <MyComponent />
      <MyComponent />
    </div>
  );
}

 

헉! 어느새 당신의 실력은 상당하당!. 부럽고 부럽당!!!

 

앗!  빼먹었당. 혹 vscode 오른쪽 아래가 아래 그림처럼 JavaScript JSX가 아니공

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

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

요따구로 해야 자바스크립트 안에서 태그 자동완성을 문제없이 쓸 수 있당.(오켕?)

 

다음 글은 무얼? 어떻게? 쓸지 나도 내가 궁금하당.~~ ㅋㅋ

 

 

---

누군가는 SOS를 너무 빨리 보내공

 

그 누군가는 SOS를 너무 늦게 보내공

 

또 누군가는 SOS를 아예 안 보내공

 

그리고 저 누군가는 SOS가 먼지 모르공

 

내가 아는  착한 그들은 SOS를 예상하고 그리로 먼저 간당.

 

나의 결론은 머 항상 대략 이렇당!

 

50 : 50 피프티 피프티  오늘 내가 SOS를 들어 볼  가능성!~~

 

React는 현재 자바스크립트 세계의 SES, 그럼 핑클은?

 

https://www.youtube.com/watch?v=XpZTcLSH6Cc