JSX 사용규칙

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

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

component는 대문자로 시작해야 한다.

export default function MyApp() {
  return (
    <div>
      <Test />
    </div>
  );
}

import { jsx as _jsx } from "react/jsx-runtime";
export default function MyApp() {
  return /*#__PURE__*/_jsx("div", {
    children: /*#__PURE__*/_jsx(Test, {})
  });
}

컴포넌트 이름 첫 글자를 소문자로 썼을 때

export default function MyApp() {
  return (
    <div>
      <test />
    </div>
  );
}

import { jsx as _jsx } from "react/jsx-runtime";
export default function MyApp() {
  return /*#__PURE__*/_jsx("div", {
    children: /*#__PURE__*/_jsx("test", {})
  });
}

ide에서 뜨는 경고 메세지

JSX 사용 규칙

- 하나의 JSX태그 반환하기

여러 개의 JSX 태그를 반환할 수 없습니다. <div>...</div> 또는 빈 <>...</> 래퍼와 같이 하나의 공유 부모로 감싸야 합니다. 왜 여러 JSX tag를 하나로 감싸줘야하나? JSX는 HTML처럼 보이지만 내부적으로는 JavaScript 객체로 변환됩니다. 하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없습니다. 따라서 또 다른 태그나 Fragment로 감싸지 않으면 두 개의 JSX태그를 반환할 수 없습니다. 또한, Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

<>  
	<h1>Hedy Lamarr's Todos</h1>  
	<img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo"  >  
	<ul> ... </ul>
</>

- br과 같은 태그 닫기

- JSX는 HTML보다 더 엄격합니다. <br /> 과 같은 태그를 닫아야 합니다. img 태그처럼 자체적으로 닫는 태그도 반드시 <img />로 작성해야하며, <li> 같은 래핑 태그 역시<li>oranges</li> 형태로 작성해야 합니다.

- camelCase를 사용하기 & JSX styling

JSX는 JavaScript로 바뀌고 JSX로 작성된 속성은 JavaScript 객체의 키가 됩니다. 종종 컴포넌트 안에서 속성을 변수로 읽고 싶은 경우가 있을 것입니다. 예시) JSX에서는 stroke-width대신 strokeWidth을 사용합니다. class는 예약어이므로, React에서는 대신 해당 DOM 속성의 이름을 따서 className을 씁니다. 이런 모든 어트리뷰트는 React DOM엘리먼트에서 찾을 수 있습니다. 틀려도 걱정하지 마세요. React는 브라우저 콘솔 에서 수정 가능한 부분을 메세지로 알려줍니다. 기존 마크업에서 모든 어트리뷰트를 변환하는 것은 지루할 수 있습니다. 변환기 를 사용하여 기존 HTML과 SVG를 JSX로 변환하는 것을 추천합니다. 변환기는 매우 유용하지만 그래도 JSX를 편안하게 작성할 수 있도록 속성을 어떻게 쓰는지 이해하는 것도 중요합니다. style={{}}은 특별한 구문이 아니라 style={ }JSX 중괄호 안에 있는 일반 {}객체입니다. 스타일이 JavaScript 변수에 의존할 때 style속성을 사용할 수 있습니다. JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 합니다. 이때 카멜 표기법으로 작성해야 합니다. (font-size => fontSize)

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

- if문(for문) 대신 삼항 연산자(조건부 연산자) 사용하기

- if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 해당하기때문에, JSX 내부 자바스크립트 표현식에서는 사용할 수 없습니다. 그렇기 때문에 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나,  {}안에서 삼항 연산자(조건부 연산자)를 사용 합니다.

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

functionApp() {
const loginYn = 'Y';
return (
		<>
			<div>
				{loginYn === 'Y' ? (
					<div>GodDaeHee 입니다.</div>
				) : (
					<div>비회원 입니다.</div>
				)}
			</div>
		</>
	);
}

// 조건이 만족하지 않을 경우 아무것도 노출되지 않는다.
functionApp() {
const loginYn = 'Y';
return (
		<>
			<div>
				{loginYn === 'Y' && <div>GodDaeHee 입니다.</div>}
			</div>
		</>
	);
}

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

조건부 렌더링

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

보다 간결한 코드를 원한다면 조건부 ? 연산자를 사용할 수 있습니다. 
if와 달리 JSX 내부에서 작동합니다:
<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

else 분기가 필요하지 않은 경우 더 짧은 논리 && 구문을 사용할 수도 있습니다:
<div>
  {isLoggedIn && <AdminPanel />}
</div>

import Profile from './Profile.js';
const user = [
  {
    id: 0,
    name: "Hedy Lamarr",
    imageUrl: "https://i.imgur.com/yXOvdOSs.jpg",
    imageSize: 90
  },
  {
    id: "Hedy Lamarr1",
    name: "Hedy Lamarr",
    imageUrl: "https://i.imgur.com/yXOvdOSs.jpg",
    imageSize: 90
  }
];

export default function App() {
  return (
    <>
      {user.map(
        (userInfo) =>
          userInfo.id && <Profile user={userInfo} key={userInfo.id} />
      )}
    </>
  );
}

    &은 &
    <은 &lt;
    >은 &gt;
    "은 &quot;
    '은 &#39
    띄어쓰기는 &nbsp;

return (
  <h1>
    {user.name}
  </h1>
);