(2024년 12월 임시 저장 글)

---

JSX

• React에서 JS 문법과 HTML 문법을 같이 혼용해서 사용할 수 있도록 만든 확장 문법 (JavaScript + XML 추가) == 가독성 ↑
• 일종의 템플릿 언어라고 생각하면 된다.
• mark language ⇒ < tag >< /tag >

// JSX
function App{
	return(
		<h1>하이루</h1>
	);
}

//위와 같이 작성하면 바벨이 다음 코드(자바스크립트)로 해석해 줌
function App(){
	return React.createElement("h1", null, "하이루");
}

→ 하나의 파일에 JS와 HTML을 동시에 작성 ⇒ 편리하다.

특징

1. 반드시 부모 요소 하나가 감싸는 형태여야 함

   // 옳은 예
   function App() {
   	return (
   		<div>
   			<div>Hello</div>
   			<div>GodDaeHee!</div>
   		</div>
   	);
   }
   
   function App() {
   	return (
         // 빈 태그도 가능 
   		<>
   			<div>Hello</div>
   			<div>GodDaeHee!</div>
   		</>
   	);
   }
   
   //틀린 예
   // Fail to compile
   // parsing error : adjacent JSX elements be wrapped in an enclosing tag
   // Did you want a JSX fragment <>...</>?
   function App() {
   	return (
   		<div>Hello</div>
   		<div>GodDaeHee!</div>
   	);
   }

2. 자바스크립트 표현식

   • 자바스크립트를 사용하려면 {}으로 감싸 줌 ex. {변수}
   • {} 안에는 표현식이 들어감
     • 표현식 : 변수의 상태 값을 반드시 바꿀 필요가 없는 경우를 의미
   • {} 안에는 문장(Statements)은 들어가지 않음 (3번과 연결)

3. 내부에서는 if문, for문 대신 삼항 연산자(조건부 연산자) 사용

   • if, for문을 사용하고자 하면 외부에서 사용해야 함

4. 태그에 class 적용 시 class —> className 이용

5. css 적용 : 카멜 표기법 사용

   1. 객체 형식으로 적용 : 스타일 이름 = {}
   2. background-color ⇒ backgroundColor

ex. class 사용 & css 사용

const Header = () => {
    return(
        <div>
            <header>
                <h1	className={headerClass}
					style={style}>WEB</h1>
                World Wide Web!
            </header>
        </div>
    )
}

const JsxEx1 = () => {
	const style = {
		backgroundColor: 'green',
		fontSize: '12px'
	}
	
	const headerClass = {
		backgroundColor: 'green',
		fontSize: '12px'
	}
}

ex. if문 사용

const JsxEx2 () => {
    return(
        <div>{
            () => {
                if(login === "yes"){
                    return <div>회원입니다.</div>
                }else{
                    return <div>비회원입니다.</div>
                }
            }
        }
        </div>
    )
}

if문 사용 X - 삼항 연산자 사용

삼항 연산자는 {}에서 사용 가능# JSX

• JavaScript 확장 문법 (JavaScript + XML 추가)
• mark language ⇒

// JSX
function App{
	return(
		<h1>하이루</h1>
	);
}

//위와 같이 작성하면 바벨이 다음 코드(자바스크립트)로 해석해 줌
function App(){
	return React.createElement("h1", null, "하이루");
}