React - JSX

JSX...?

JavaScript를 확장한 문법으로 React의 엘리먼트를 생성한다.
자바스크립트 코드 안에서 UI 관련 작업을 할 때 시각적으로 많은 도움이 될 수 있기 때문에 사용하며 React에서 도움이 되는 에러 및 경고 메세지를 표시할 수 있도록 해준다.
다만 자바스크립트 문법이 아니기 때문에 babel의 도움을 받아 해석해주어야 웹브라우저가 읽을 수 있다.

JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.

const name = "Mia";
const element = <h1>Hello, {name}</h1>;

JSX도 하나의 표현식으로 자바스크립트의 객체로 인식된다.

==> if문, for문 안에서도 사용가능하며 변수에 할당, 인자로 받아들이고 함수로부터 반환 할 수 있다.

function formatName(user) {
	return `${user.firstName} ${user.lastName}`
};

const user = {
	firstName: 'Mia',
    lastName: 'Seo'
};

function getGreeting(user){
	if(user) {
    return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
}

중괄호를 사용하여 속성에 자바스크립트 표현식을 삽입할 수도 있다.

💡 JSX는 HTML보다는 JavaScript에 가깝기 때문에 HTML속성 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
ex) class => className, tableindex => tabIndex, background-color => backgroundColor

const img = <img src={user.avatarUrl}></img>;
const p = <p className="greeting">Hello!</p>

JSX 태그는 자식을 포함할 수 있으며 태그가 비어있다면 self-closing 할 수 있다.

const element = (
	<div>
    	<h1>Hello!</h1>
        <h2>Good to see you here.</h2>
    </div>
)

JSX에서 바로 이벤트 리스너를 등록할 수 있다.

태그를 작성할 때 속성으로 on + [이벤트 명] = {함수}를 주면 된다.

const introduce = () => alert("Hello, World");
return (
	<h1 className={title} onClick={introduce}>
    	Hello
    </h1>
)
export default App;

JSX에서는 JavaScript Object의 형태로 inline style을 표현한다.

const style = {
	color: 'red',
    backgroundColor: 'yellow',
};
const introduce = () => alert("Hello, World");
return (
	<h1 className={title} onClick={introduce} style={style}>
    	Hello
    </h1>
)
export default App;

만약 변수로 style을 선언하지 않고 JSX 안에서 바로 스타일 객체를 선언하고 싶은 경우 중괄호가 두개가 생기는데 첫번째 중괄호는 JSX안에서 자바스크립트 값을 사용하겠다는 의미이고 두번째 중괄호는 자바스크립트의 object를 표현하는 것이다.

const introduce = () => alert("Hello, World");
return (
	<h1 className={title} onClick={introduce} 
    style={{color: 'red',
    backgroundColor: 'yellow',}}>Hello</h1>
)
export default App;

React.Fragment

모든 JSX는 하나의 부모 태그로 감싸져 있어야 한다.
하지만 JSX문법을 위해 필요하지 않은 div태그를 추가하는 것은 비효율적이기 때문에 실제 DOM에는 추가되지 않지만 JSX는 그룹화해주는 React.Fragment라는 태그가 생겼다.
이 태그는 react패키지에서 사용하는 것이기 때문에 react패키지를 import해주어야 한다.
<React.Fragment>태그를 앞뒤로 추가해주거나 <></>만 추가해주어도 된다.

return (
	<React.Fragment>
      <h1></h1>
      <p></p>
    </React.Fragment>
    )