React에서 사용하는 JSX

JSX란?

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

JSX문법

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

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

• 에러코드

function App(){
	return (
    	<div>HI</div>
      	<div>Hello</div>
    )
}

• 정상코드

function App(){
	return (
      <div>
    	<div>HI</div>
      	<div>Hello</div>
      </div>
    )
}

2. JavaScript 표현식.

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

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

3. if(for)대신 삼항 연산자 사용

• 외부에서 사용하는 방법

function App() {
	const name = 'YoonHu';
  	const content = ''
	if(name === 'YoonHu') content = <div>제 이름은 {name}입니다.</div>
  	else content = <div>제 이름은 없습니다.</div>
      
  return (
		<div>
		      {content}
		</div>
	);
}

• 내부에서 사용하는 방법

function App() {
	const name = 'YoonHu';
      
  return (
		<div>
		    {
      			name === YoonHu 
                  ? <div>제 이름은 {name}입니다.</div>
                  : <div>제 이름은 없습니다.</div>
      		}
		</div>
	);
}

4. React DOM은 HTML 어트리뷰트 이름 대신 CamelCase 프로퍼티 명명을 규칙으로 사용한다.

• JSX 스타일링
  • JSX에서 JavaScript 문법을 쓰려면 {}를 사용해야 하기 때문에 스타일을 적용할 때에서 객체 형태로 넣어주어야 한다.
  • camelCase로 작성해주어야 한다.(font-size -> fontSize)

function App() {
	const style = {
		backgroundColor: 'black',
		fontSize: '10px'
	}
	return (
		<div style={style}>Hello, YoonHu</div>
	);
}

• class 대신 clssName
  • 일반 HTML에서 CSS 클래스를 사용할 때에는 class라는 속성을 사용한다.
  • JSX에서 class가 아닌 className을 사용한다.

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