[react] JSX 란? (표현식, 속성, if문은 어떻게 사용하는지)

📍 JSX 란?

• JavaScript XML 의 줄임말
• JS 코드 안에서 HTML 같은 문법을 쓸 수 있게 해줌
• 브라우저가 직접 이해하는 건 아님. 
• React 가 JS 코드로 변환해서 실행함
• JSX를 사용하면 React 에서 HTML 을 작성하고 추가하는 게 쉬워짐.

 

 

 

 

📍 리액트에서 JSX를 쓸 때, 태그에 class 를 넣고 싶으면?? 

• className 이라고 적어줘야함!!
• const myElement2 = (  
    <>
        <p className="aaa">사과</p>
        <p className="bbb">귤</p>
        <p className="ccc">포도</p>
    </>
  );
• 꼭!! 최상위 요소가 한개여야함!! block 형태로 뭔가 묶는 느낌임!! 꼭 뭉탱이로 한번에 움직일 수 있게 처리해줘야하는 느낌!! 
• 만약 최상위 요소로 쓸 게 전혀 없으면 <> </> 처리 라도 해줘야해!! 

 

 

📍 JSX 에서의 표현식 사용

• const myElement = <h1 className="aaa">5 + 5 = {5+5}</h1>;
• JSX에서는    { ~~~ }    로 표현식을 사용함.

// import React from 'react';
// import { createRoot, creatElement } from 'react-dom/client';

// const myElement = React.createElement('h1', {}, 'JSX 사용하지 않았어요');

import { createRoot } from 'react-dom/client';

//const myElement = <h1>JSX를 사용함</h1>;
const myElement = <h1 className="aaa">5 + 5 = {5+5}</h1>;

// 최상위 요소는 한개만 있어야함..
const myElement2 = ( 
    <>
        <p className="aaa">사과</p>
        <p>귤</p>
        <p>포도</p>
    </>
);


function Intro() {
    const name = '전우치';
    return (
        <>
            <h1>하이루</h1>
            <p>나는 {name}야</p>
        </>
    )
}

createRoot(document.getElementById('root')).render(
    //myElement2
    <Intro /> // 리엑트에서는 컴포넌트로 넘길수도 있음.
);

 

 

 

 

---

 

📍 JSX 표현식

• 표현식 안에서 연산을 할 수 있음.
• 표현식 안에서 다른 함수를 호출해서 값을 가져올 수도 있음.
• 표현식 안에서 객체를 꺼내와서 쓸 수도 있음.
• // 태그에 직접 style 을 넣는 경우는 -->  자바스크립트 객체의 형테로만 허용됨. 

function Money() {
    const m = 5 * 1000;
    return (
        <>
            <h1>내 지갑에는</h1>
            <p>{ getMoney(7) } 원이 있어요.</p> 
        </>
    );
}

function getMoney(won) {
    return won * 1000;
}

function Human() {
    const kildong = {
        name : "홍길동", 
        age : "22",
        address : "서울"
    }

    const a = "title";
    const myFunc = () => {
        alert("안녕하세요");
    }

    // 태그에 직접 style 을 넣는 경우는 -->  자바스크립트 객체의 형테로만 허용됨. 
    const style1={ // css 속성들에 대해서는 카멜표기법으로 작성해야됨.
        color : "red",
        fontSize : "small",
        backgroundColor : "yellow"
    }

    return (
        <>
            <p className={a} onClick={myFunc}>{kildong.name} 은 {kildong.age} 세 이고, {kildong.address}에 살아요</p>
            <button onClick={myFunc} disabled={true}>버튼</button>
            <p style={style1}>안녕하십니까</p>
        </>
    );
}

 

 

 

---

 

 

📍 JSX 내부에서는 if 문 지원 안함!! 

• 방법 1 :: if 조건문을 JSX외부에 둬야함.
• 방법 2 :: 삼항 표현식 사용.

function ChkAdult(){
    const age = 30;
    let generation;
    console.log(generation); // undefined


    // 방법 1 :: JSX 밖에서 if문 돌리기
    if( Math.floor(age / 10) >= 3 ){
        generation = Math.floor(age / 10) + "0대 이상";
        console.log(generation);
    } 

    return ( // 여기 부분이 JSX !!
        <>  {/* 방법 2 :: 삼항연산자 사용하기 */}
            <p>당신은 { (age > 19) ? "성인" : "미성년자" } 입니다. </p>
            <p>당신은 { generation }입니다. </p>
        </>
    );
}

 

 

 

---

출처 : 

[왕초보 홈페이지만들기 리액트 기초 유튜브 강의]

https://www.youtube.com/watch?v=AmBAgN0-AIU&list=PLTb3qGCzYjS2AliTIbz9eAGjZSdEQa3m1&index=14

 

 

---

개발 공부를 위한 블로그 입니다. 

오류가 있다면 댓글로 알려주세요! 

감사합니다.