소개

React를 학습하고 JSX에 대해 이해가 얕아서 이번에 간단하게 정리해 보았습니다.
이번에는 특수한 JSX의 구문에 대해 정리해 보았습니다.

특수 JSX 구문

우리 자신은 아래의 세 가지 코드를 설명 할만큼 이해하지 못했기 때문에 요점을 요약하기로 결정합니다.

①

return (
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
)

②

return (
  <React.Fragment>
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
  </React.Fragment>
)

③

return (
  <>
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
  </>
)

전제 지식

1.JSX는 반드시 계층 구조이어야 한다!
최상위 구성 요소 또는 태그를 작성해야합니다.

이것을 근거로 한 후에, 앞의 ①에서는 최상위의 컴퍼넌트 혹은 태그의 기재가 없습니다.

오류

return (
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
)

그렇다고 해서, 다른 방법으로서 div 태그로 둘러싸 버리는 것 되지 않습니다! HTML에서 div 태그는 아무런 의미가 없으며 필요하지 않은 경우 div 태그를 사용하지 않는 것이 좋습니다.
이유로서 HTML로 출력했을 때에 CSS의 무너짐이 없어지기 때문이다.

   return (
　　　　　　　 <div>
      <p>{caption}</p>
      <img src={samplePath} alt={'sample写真'} />
    </div>
  )
}

div 태그를 사용하지 않는 방법 -React.Fragment-

return (
  <React.Fragment>
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
  </React.Fragment>
)

방금전, div 태그는 사용하고 싶지 않을 때의 대처법으로서 React.Fragment를 사용합니다!
앞서 언급한 조건으로서의 JSX는 반드시 계층 구조여야 한다! 그렇다고하는 것도 클리어합니다.

최종적으로 HTML로 출력했을 때는 React.Fragment가 없었던 것으로 출력된다.

return (
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
)

병렬로 사용할 때 React.Fragment를 사용합시다.

　-React.Fragment는 생략 가능-

return (
  <React.Fragment>
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
  </React.Fragment>
)

return (
  <>
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
  </>
)

흔한 실수

return (
  <>
   <p>サンプルコードです</p>
  </>
)

잘못 사용하는 방법으로 태그가 하나밖에 없는데 React.Fragment를 하고 있는 경우가 있다. 이것이라고 의미를 하지 않는다. p 태그 하나로 좋다. React.Fragmen은 둘 이상으로 정렬 할 때 계층 구조 규칙이 있으므로 상위 태그를 사용할 때 사용됩니다.

일본 제일 알기 쉬운 React 입문【기초편】JSX의 기법