[React] Component - JSX

🔎 JSX

 👉 JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법  

• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.  
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다

예시)

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

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

JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.  
자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉬운것 같다.

📄 JSX 문법

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

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

Ex) 에러케이스

// 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>MinTaek!</div>
	);
}

👉 DOM 으로 묶여있지 않기 때문에 Fail to compile

EX) 정상 케이스

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

👉 <Fragment></Fragment> or (<></>) 도 사용이 가능, Fragment는 div 태그보다 무거운 편.

2. 자바스크립트 표현식

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

function App() {
	const name = 'MinTaek';
	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 arrow)

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

4. class 대신 className

• HTML에서 CSS 클래스를 사용할 때에는 class라는 속성을 사용

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

5. 인라인으로 style 주기

• JSX에서 자바스크립트 문법을 쓰려면 대괄호 {} 를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다.  

• 카멜 표기법으로 작성해야 한다. (font-size => fontSize)

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있다
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

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

• {/*…*/} 와 같은 형식을 사용

• 시작태그를 여러줄 작성시에는, 내부에서 // 의 형식을 사용

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

출처

갓대희의 작은공간