JSX 문법

• JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

// 실제 작성할 JSX 예시
function App() {
	return (
      <h1>Hello, GodDaeHee!</h1>
    );
}

// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다.
function App() {
	return React.createElement("h1", null, "Hello, GodDaeHee!");
}

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

• 기본적으로 아래 3가지 방식으로 많이 작성한다.

// div를 사용 하였기 때문에 스타일 적용시 작성한 코드를 div로 한번 더 감쌌다는 부분을 고려해야 한다.
function App() {
	return (
		<div>
			<div>Hello</div>
			<div>GodDaeHee!</div>
		</div>
	);
}

// <Fragment>를 사용가능 하지만 <div>태그보다 무거운 편이다.
function App() {
	return (
		<Fragment>
			<div>Hello</div>
			<div>GodDaeHee!</div>
		</Fragment>
	);
}

function App() {
	return (
		<>
			<div>Hello</div>
			<div>GodDaeHee!</div>
		</>
	);
}

2.자바스크립트 표현식

• JSX 안에서도 자바스크립트 표현식을 사용할 수 있다.
• 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.

function App() {
	const name = 'GodDaeHee';
	return (
		<div>
			<div>Hello</div>
			<div>{name}!</div>
		</div>
	);
}

3. if문(for문) 대신 삼항 연산자(조건부 연산자) 사용

• if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.
• 그렇기 때문에 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나, {}안에서 삼항 연산자(조건부 연산자)를 사용 한다.

1)외부에서 사용 방법

function App() {
	let desc = '';
	const loginYn = 'Y';
	if(loginYn === 'Y') {
		desc = <div>GodDaeHee 입니다.</div>;
	} else {
		desc = <div>비회원 입니다.</div>;
	}
	return (
		<>
			{desc}
		</>
	);
}

2)내부에서 사용 방법

function App() {
	const loginYn = 'Y';
	return (
		<>
			<div>
				{loginYn === 'Y' ? (
					<div>GodDaeHee 입니다.</div>
				) : (
					<div>비회원 입니다.</div>
				)}
			</div>
		</>
	);
}

3)AND연산자(&&) 사용 방법

// 조건이 만족하지 않을 경우 아무것도 노출되지 않는다.
function App() {
	const loginYn = 'Y';
	return (
		<>
			<div>
				{loginYn === 'Y' && <div>GodDaeHee 입니다.</div>}
			</div>
		</>
	);
}

4)즉시실행함수 사용 방법

function App() {
	const loginYn = 'Y';
	return (
		<>
			{
			  (() => {
				if(loginYn === "Y"){
				  return (<div>GodDaeHee 입니다.</div>);
				}else{
				  return (<div>비회원 입니다.</div>);
				}
			  })()
			}
		</>
	);
}

4.React DOM은 HTML 어트리뷰트 대신 camelcase 프로퍼티 명명 규칙을 사용

1. JSX 스타일링

• JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다.
• 카멜 표기법으로 작성해야 한다. (font-size => fontSize)

//css style
function App() {
	const style = {
		backgroundColor: 'green',
		fontSize: '12px'
	}
	return (
		<div style={style}>Hello, GodDaeHee!</div>
	);
}

2)class 대신 className

• JSX에서는 class가 아닌 className 을 사용한다.

//className
function App() {
	const style = {
		backgroundColor: 'green',
		fontSize: '12px'
	}
	return (
		<div className="testClass">Hello, GodDaeHee!</div>
	);
}

5. JSX 내에서 주석 사용 방법

• JSX 내에서 {/…/} 와 같은 형식을 사용 한다.

function App() {
	return (
		<>
			{/* 주석사용방법 */}
			<div>Hello, GodDaeHee!</div>
		</>
	);
}

• 시작태그에 여러줄 작성시에는, 내부에서 // 의 형식을 사용할 수 있다.

function App() {
	return (
		<>
			<div
			// 주석사용방법
			>Hello, GodDaeHee!</div>
		</>
	);
}

6.이벤트 처리

ex1) onClick 사용법

//HTML
<div onclick="실행할 자바스크립트~~~">

//JSX
<div onClick={실행할함수}>

1. Click이 대문자인거
2. {} 중괄호 사용하는거
3. 그냥 코드가 아니라 함수를 넣어야 잘 동작한다는거

3-1)함수를 사용하는 방법

function App(){
  
  function 함수임(){
    console.log(1)
  }
  return (
     <div onClick={함수임}> 안녕하세요 </div>
  )
}

<div onClick={ function(){ 실행할코드 } }> 
<div onClick={ () => { 실행할코드 } }>

마무리

개발자가 JSX를 작성하기만 하면, 리액트 엔진은 JSX를 기존 자바스크립트로 해석해 준다.

이를 '선언형 화면' 기술이라고 한다. 앞으로 사용할 react의 기본문법이니 숙지하고 가도록 하자.

 

 

 

 

 

 

 

 

 

참고 사이트

[React] 2. JSX란? (정의, 장점, 문법)

JSX 소개 – React