React- JS에서 JSX를 사용할 경우 function 규칙(div, class)

React- JS에서 JSX를 사용할 경우 function 규칙

오늘은 React를 사용하면서

function에 대한 규칙에 대해 알아보겠습니다.

 

React를 통해 JS에서 JSX를 사용하실 경우

function으로 된 구조를 먼저 확인하실 수 있습니다.

(JS에서 사용되는 HTML을 JSX라고 합니다.)

 

function을 사용할 때는

return을 반드시 사용해야 하고

return 안에는 반드시

한 개의 div 태그만 들어갈 수 있다는 것입니다.

 

너무 극단적으로 설명을 드려서 당황하실 수 있지만

자세하게 설명드리면

return안에 가장 밖에는 한 개의 div 태그만 사용할 수 있다는 것입니다.

 

예를 들면

function App(){
  return(
  <div>
    <div>
     <h1>hello</h1>
    </div>
   </div>
  );
} //이런 경우는 가능

function App(){
  return(
   <div>
     <h2>이건 불가능</h2>
   </div>
   <div>
     <h1>hello</h1>
   </div>
  );//이런 경우는 불가능

 

예시를 볼 때 한 개의 div로 다른 div를 감싸는 경우는 가능합니다.

하지만 return에 2개의 div가 있는 것은 오류를 발생합니다.

 

그렇기 때문에 만약 div를 2번 사용해야 하는 경우에는

div태그 안에 2개의 div를 작성하시면 됩니다.

 

하지만 div를 두 번 사용하시는 것은 추천드리지 않습니다.

이유는 function에는 한 동작만 하는 것을 작성하시는 것이

가독성도 좋고 재활용하기도 좋기 때문에

 

꼭 필요한 경우가 아니라면

div를 두 번 작성해야 하는 경우

function을 한 개 더 만드시는 것을 추천드립니다.

 

그리고 주의하실 점이 한 가지 더 있습니다.

HTML에서는 태그를 고유하게 만들기 위해서

id, class를 사용하는데

JSX에서도 id, class를 사용해서 태그를 고유하게 만들 수 있습니다.

 

이때 주의하실 점은 class를 사용할 경우인데요.

JSX에서는 class를 그냥 사용하시면 안 되고

className으로 사용해야 합니다.

 

이유는 JSX는 JS에서 사용하기 때문에

JS에서 class 속성이 이미 있기 때문에

이름이 겹치면 안 되기 때문에

JSX에서는 class대신 className을 사용해서

사용하고 있습니다.

 

감사합니다!