JSX란?

1. 개념
2. 특징

개념

• 자바스크립트의 확장 문법 (Javascropt + XML)
• 브라우저가 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용해 일반 자바스크립트로 코드 변환함

특징

장점

• 가독성이 높다
• 활용도가 높다

import reportWebVitals from './reportWebVitals'// 웹 성능 측정도구
<React.StrictMode> //개발환경에서만 활성화되는 디버깅용 컴포넌트

표현

• JS 문법을 {}로 감싸서 사용 가능
• If문 대신 조건부 연산자(삼항 연산자)
• AND 연산자(&&)를 사용한 조건부 렌더링

return <div>{name === '리액트' ? <h1>리액트</h1> : null}</div>;
// AND 연산자로 더 짧은 코드로 구현
return <div>{name === '리액트' && <h1>리액트</h1>}</div>;

• undefined 렌더링하지 않기
  함수에서 undefined만 반환하여 렌더링 하는 상황을 만들면 안 됨(에러 발생) - OR(||) 연산자 사용

function App(){
  const example = undefined
  return example || undifined
}

• JSX 내부에서의 undefined 렌더링은 괜찮음

  function App(){
  const example = undefined
  return <div>{example}</div>
}