[React.js] JSX

 

JSX : JavaScript를 확장한 문법으로 JavaScript와 html을 혼용하여 사용할 수 있게 해 준다

         변수를 {} 안에 넣어 사용해 동적으로 처리할 수 있게 해 준다

 

function App () {
  const number = 10;
  return (
    <main/>
      <h2>{number % 2 === 0 ? "짝수" : "홀수"}</h2>
  );
 };

 

run dev 해보면 결괏값인 짝수 출력

 

 

 

JSX 주의사항

 

 

 1. 중괄호 내부에는 자바스크립트 표현식만 가능

 

자바스크립트 표현식 : 삼항연산자, 숫자값, 변수명 등등 if, for문은 사용 불가

 

 

 

 

 

 2. 숫자, 문자열, 배열 값만 렌더링 가능

 

객체도 렌더링 불가 → 점 표기법으로 사용하면 렌더링 가능

 

 

function App () {
  const number = 10;
  return (
    <main/>
      <h2>{number % 2 === 0 ? "짝수" : "홀수"}</h2>

      {10}
      {"lemon"}
      {number}
      {[1, 2, 3]}
      {true}
      {undefined}
      {null}

      {obj.music} → 정상 출력(점 표기법)
      {obj}

            → Error: Objects are not valid as a React child (found: object with keys {music}). If you meant to render a 

                collection of children, use an array instead.
  );
 };

 

 

10lemon10123lemon 만 출력

 

→ true, undefined, null 값은 렌더링 X

 

 

 

 

 

3. 모든 태그는 닫혀 있어야 한다.

 

html에서는 img 나 input 단일태그는 닫는 태그가 필요 없음
그러나 jsx에서 그대로 쓰면 오류 발생

 

 

 

4. 최상위 태그는 반드시 하나여야만 한다

 

최상위 태그는 <> 빈 내용으로 두어도 됨