[React] React Component Wrapping 태그 사용하기

React.Fragment를 간략하게 사용하는 방법입니다.

 

우선 components 폴더의 component 작성 시 wrapping 태그가 필요합니다.

return 할 때 최상위 태그 1개에 묶여 있어야 합니다.

<div> 태그로 묶여 있는 코드

 return (
    <div className="App">
      <button onClick={() => inEnglish()}>영어로!</button>
      <br />
      <span>{teacher}</span>
    </div>
  );

 

방법 1

div, span 등

return (
  <div>
    your code
  </div>
 );

 

방법 2

<></> == <React.Fragment></React.Fragment>

해당 코드의 경우에는 콘솔 검사를 할 때 방법1의 <div></div> 처럼 남아있지 않습니다.

return (
  <>
    your code
  </>
 );

 

방법 3

Fragment 사용하는 경우에는 import가 필요합니다.

해당 코드의 경우에는 콘솔 검사를 할 때 방법1의 <div></div> 처럼 남아있지 않습니다

import { Fragment } from 'react';

return (
  <Fragment>
    your code
  </Fragment>
 );

 

 

참고사이트

React Native what exactly is the <> (empty) component