React - JSX 문법 종류

1. Javascript Syatax eXtension 문법 종류

1) JSX element

• JSX element는 자바스크립트 파일 어디에서나 필요한 곳에 HTML처럼 작성할 수 있으며,
  아래 예시처럼 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다.

예시1)
const hi = <p>Hi</p>;

예시2) - JSX - Nesting

const Login = () => {
	const [id, setID] = useState("");
	const saveUserID = (event) => {
		setID(event.target.value);
	};
    
    return(
      <div>
          <input
            className="input_e-mail"
            type="text"
            placeholder="이메일"
            value={id}
            onChange={saveUserID}
          ></input>
      </div>
	);
}.

2) Javascript 표현식

• JSX 내부에서 자바스크립트 값을 출력하고 싶다면, { ... JavaScript... } 와 같이 { } 안에 유효한 자바스크립트 표현식을 작성할 수 있음

import React from 'react'

const Greetings = () => {
  const name = '김개발';

  return (
  	<h1>{name}님, Welcome to Wecode!</h1>
  );
};

export default Greetings;

3) JSX attribute(속성명) - (JSX : className)

• 태그의 attribute name(속성명)은 camelCase로 작성해야하며, 만약에 attribute를 추가하고 싶을 때는 실제 HTML에서 쓰는 attribute name(속성명)과 다를 수 있으니 참고해야 한다. (예를 들어, HTML에서 class를 주고 싶을 때 원래 속성명은 class이지만, JSX에서 사용하는 HTML class는 className을 사용해야함)

// HTML
<h1 class="greetings">Welcome to Wecode!</h1>

// JSX
<h1 className="greetings">Welcome to Wecode!</h1>

4) Event 처리

• React가 아닌 바닐라 자바스크립트에서는, 해당하는 DOM 요소에 직접 접근해 Event Listener를 부착하는 방식으로 이벤트를 처리했지만, JSX에선 직접 이벤트와 이벤트 핸들러(Event Handler)를 부여할 수 있는 방식으로 처리해야 한다.
  -> 이벤트는 앞에 on을 붙여 camelCase로 작성.
  -> 문자열이 아닌 함수로 이벤트 핸들러를 전달

// JS
const title = document.getElementsByClassName('title')[0];
title.addEventListener('click', handleClick);

// JSX
<h1 className="title" onClick={handleClick}>Welcome to Wecode!</h1>

5) inline styling - (JSX : {{ color: "red", background-color: "yellow" }})

• style 속성은 HTML에서 문자열로 받는 것과 달리 camelCase를 요소로 가지는 자바스크립트 객체를 받는다. 아래처럼 JSX에서 inline 태그를 이용해서 styling을 할 경우, 중괄호를 두 번 겹쳐서 쓰는 형태로 사용해야 한다.
  (바깥의 { }는 JSX 문법을 의미하며 안쪽의 { }는 자바스크립트 객체를 의미함)

// HTML
<h1 style="color:red;background-image:yellow">Welcome to Wecode!</h1>

// JSX
<h1 style={{ color: "red", backgroundImage: "yellow" }}>
  Welcome to Wecode!
</h1>

🚨 주의사항

• JSX에 style 속성을 사용하는 inline styling은 css보다 성능이 낮고 우선순위가 높기 때문에, 동적으로 계산하여 스타일링하는 경우 이외에는 사용을 지양하는 것이 좋으며 SCSS를 기반으로 스타일링 하는 것을 추천하는 바 있다.)

6) Self-Closing Tag

• JSX 문법에선 어떤 태그라도 self closing tag를 사용할수 있다. 예를 들어 일반 HTML의 img 태그 처럼 하나만 있는 태그의 경우에는 /으로 끝내지 않아도 되지만 JSX에서는 항상 /으로 끝내줘야 합니다.

// JSX	
    <div className="login">
      <div className="logo">
        <img className="logo_wecode01" src={logo1} alt="위코드 로고1"></img>
        <img className="logo_wecode02" src={logo2} alt="위코드 로고2"></img>
      </div>
    </div>

7) Nested JSX

• JSX 에서 HTML 태그를 사용할땐 반드시 최상위를 감싸고 있는 하나의 태그가 있어야 한다.

// Bad : 에러 발생
const Greetings = () => {
	return (
		<h1>김개발님!</h1>
		<h2>위코드에 오신 걸 환영합니다!</h2>
	);
}

// Good : 정상 동작
const Greetings = () => {
	return (
    	// Nesting Start Tag
		<div>
			<h1>김개발님!</h1>
			<h2>위코드에 오신 걸 환영합니다!</h2>
		</div>
        // Nesting End Tag
	);
}

🚨 JSX 에서 하나의 태그를 Nesting 으로 만들어야 하는 이유
-> Virtual DOM에서 컴포넌트 변화를 효율적으로 비교할 수 있도록 한 컴포넌트는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문

8) React.Fragment

• JSX 에서 태그를 감쌀땐 반드시 최상위에 태그를 감싸고 있어야만 하는데, 별도의 태그에 특별한 의미나 스타일이 없다면? 불필요한 요소를 생성하게 되어 관리에 비효율적이다. 이때, 유용하게 사용되는 것이 <React.Fragment>이다. (Fragment는 추가적인 DOM element를 생성하지 않고 하나의 컴포넌트 안에 여러 요소(자식)를 간단하게 그룹화할 수 있는 기능을 말한다. 또한 축약형<>..</>으로도 Fragment를 구현할수 있다.)

// React.Fragment 사용시
const Greetings = () => {
	return (
		<React.Fragment>
			<h1>김개발님!</h1>
			<h2>위코드에 오신 걸 환영합니다!</h2>
		</React.Fragment>
	);
}

// 축약형 Fragment 사용시
const Greetings = () => {
	return (
		<>
			<h1>김개발님!</h1>
			<h2>위코드에 오신 걸 환영합니다!</h2>
		</>
	);
}