JSX 소개 | 2일차

뭐

JSX는 JavaScript Syntax Extension의 약자입니다.

UI(HTML)를 JavaScript 코드에 통합할 수 있습니다.

왜

이를 사용하여 HTML 코드를 JavaScript에 작성할 수 있습니다.

그러나 HTML은 유효한 JavaScript가 아닙니다. 코드에서 HTML을 사용하면 오류가 발생합니다.

따라서 JSX가 작동하려면 Babel이라는 Transpiler를 사용합니다.

Babel은 JSX를 유효한 JavaScript 코드로 변환합니다.


그러나 Transpilers는 무엇을합니까 ??

따라서 그들은 하나의 프로그래밍 언어로 작성된 소스 코드를 읽고 다른 언어로 동등한 코드를 생성하는 도구입니다.

그리고 Babel도 Transpiler입니다.

Transpilers의 더 많은 기능.

Typescript 또는 JavaScript 대신 사용되는 다른 언어와 같은 언어에 대해 들어 본 적이 있습니까?

이 언어는 Transpilers를 사용하여 코드를 유효한 javaScript 코드로 변환합니다.

이러한 언어를 사용하는 포인트는 JavaScript를 참조하여 더 배우기 쉽습니다.

어떻게

따라서 작성한 JSX는 JavaScript에서 변환됩니다.

이와 같이

<div>
     <h3>JSX Demo</h3>
      <img src="image.src"/>
</div>

👇로 컴파일

React.createElement(
            "div", null,
            React.createElement("h3", null, "JSX Demo"),
            React.createElement("img", { src: "image.jpg})
);

//You can also write this javaScript code instead of the JSX the program will work the 
same way.

👇🏻에서도 사용해보실 수 있습니다.

Babel · The compiler for next generation JavaScript

JSX에 자바스크립트 내장

JSX에서 JavaScript를 사용하려면 중괄호로 묶어야 합니다{}.

처럼,

class Demo extends React.Component{
        render(){
            return <h3>Your Marks are : {12*6}</h3>;    
        }
}

중괄호{}에서 루프, 조건 또는 많은 것을 사용할 수 있습니다.

조건부 👇의 더 나은 예

//Mood Representer 
function getName(){
    const names = ["Rajiv","Sanjay","Michel","Harry","Honey","Jayant"];
    return names[Math.floor(Math.random()*names.length)];
}


function getMood(){
    const Moods= ["😇","😀","😄","😁","😆","😅","😂","🤣","😊","😇","😍"];
    return  Moods[Math.floor(Math.random()*Moods.length)];
}

class Moods extends React.Component{
    render(){
        return (<h3>{getName()} mood is : {getMood()}</h3>)
    }
}

class App extends React.Component{
    render(){
        return(
            <div>
                <Moods/>
                <Moods/>
                <Moods/>
            </div>
        )
    }
}

ReactDOM.render(<App/>,document.getElementById('root'));

JSX의 조건부 →

JSX는 루프 및 기타 조건식을 지원하지 않으므로 조건을 처리하려면 JavaScript를 사용해야 합니다.

조건식 구현에 대한 자세한 내용은 이 블로그 페이지를 참조하십시오.

Conditional rendering in React: 9 methods with examples - LogRocket Blog

다음은 내가 배우고 사용한 것입니다.

사용 중if else ⇒

//Magic Number 

function getNum() {
  return Math.floor(Math.random() * 10 + 1);
}

// Using if and else
class MagicNum extends React.Component{
     render(){
       const num = getNum();
       let msg;
       if(num===7){
         msg = "Congrates!!!!"
       }
       else{
         msg = "Better luck next Time";
       }
       return (
         <div>
           <h1>Your Number is : {num}</h1>
           {msg}
         </div>
       );
     }
 }

//Using Ternary Operator
class MagicNum extends React.Component {
  render() {
    const num = getNum();
    return (
      <div>
        <h1>Your Number is : {num}</h1>
        <p>{num===7? "Congrats!!!" : "Better luck next time" }</p>
      </div>
    );
  }
}

//Using & opeartor
class MagicNum extends React.Component {
  render() {
    const num = getNum();
    return (
      <div>
        <h1>Your Number is : {num}</h1>
        <p>{num === 7 ? "Congrats!!!" : "Better luck next time"}</p>

        {num === 7 && (
          <img src="https://images.unsplash.com/photo-1641005361416-fba29d009bd2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyM3x8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60" />
        )}
      </div>
    );
  }
}

ReactDOM.render(<MagicNum />, document.getElementById("root"));