[React] JSX 문법

1) JSX (Javascript Syntax eXtension)

react에서 사용하는 문법
=> 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환함.
=> 하나의 파일에 js와 html을 동시 작성 가능하여 편리함.

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

// 2) 바벨이 자바스크립트로 해석하여 준다.
function App() {
	return React.createElement("h1", null, "Hello, Eunseo!");
}

2) JSX 문법

2-1) 닫힌 태그 사용

function App() {
	return (
      <p>Hello world // 에러발생
      <p>Hello world</p> // 정상작동
      <input type='text' > 에러발생
      <input type='text' /> // 정상작동
	);
}

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

• Virtual DOM에서 컴포넌트 변화를 감지할 때 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문.

//1) 에러 케이스
function App() {
	return (
		<div>Hello</div>
		<div>Eunseo!</div>
	);
}


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


// 3) Fragment
function App() {
	return (
		<Fragment>
			<div>Hello</div>
			<div>Eunseo!</div>
		</Fragment>
	);
}


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

2-3) 자바스크립트 표현식

• JSX내부에서 코드를 { }로 감싸줌.

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

2-4) if(for)문 대신 삼항 연산자 사용

//1)  외부에서 사용
function App() {
	let desc = '';
	const loginYn = 'Y';
	if(loginYn === 'Y') {
		desc = <div>Eusneo 입니다.</div>;
	} else {
		desc = <div>비회원 입니다.</div>;
	}
	return (
		<>
			{desc}
		</>
	);
}

//2) 내부에사 사용
function App() {
	const loginYn = 'Y';
	return (
		<>
			<div>
				{loginYn === 'Y' ? (
					<div>Eunseo 입니다.</div>
				) : (
					<div>비회원 입니다.</div>
				)}
			</div>
		</>
	);
}


// 3) AND 연산자 사용
function App() {
	const loginYn = 'Y';
	return (
		<>
			<div>
				{loginYn === 'Y' && <div>Eunseo 입니다.</div>}
			</div>
		</>
	);
}

// 4) 즉시 실행 함수
function App() {
	const loginYn = 'Y';
	return (
		<>
			{
			  (() => {
				if(loginYn === "Y"){
				  return (<div>Eunseo 입니다.</div>);
				}else{
				  return (<div>비회원 입니다.</div>);
				}
			  })()
			}
		</>
	);
}

★ TIP

1) camelCase 프로퍼팉 명명 규칙을 사용

2) className 사용

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

3) 주석 사용 시, /* */ 또는 시작 태그 내부에서 // 형식 사용 가능

4) CSS 작성된 파일 불러오기

import 이용

import './App.css'