[React.JS] 리액트 JSX 문법 정의 및 활용 (2)

JSX ? 

--> React.JS 에서 컴포넌트 선언할 때 사용하는 XML문법 이며, 도구 바벨(Babel)을 사용한다.

바벨(Babel) ?

--> XML형태의 HTML코드를 자바스크립트로 변환해주는 역할을 한다.

---

Cf. 바벨(Babel) 적용예시.

function SecondComponent() {

    return <div>Hello</div>; 

}
--> React.createElement("div", null, "Hello");  변환.

---

 

<JSX문법 사용시, 주의사항> 

 

1. 태그는 반듯이 닫아라

 

function MyFirstComponent() {   

   return <div><input /></div>  /* 한줄 표현시, 소괄호 "()" 생략가능 */ 

}

2. 두개이상태그는 하나의 상위 태그로 감싸라 

 

function MyFirstComponent() {

   return (
      <div> 
         <Hello />
         <div></div>
      </div>

   );

}

3. 불필요한 태그는, 사용하지 않으며 Fragement Tag "<></>"활용

 

function MyFirstComponent() {

   return (     

      <>

         <MyFirstComponent /> 

         <div>Hello.</div>

      </>

   );   

}

 

4. JSX에서 javascript 값을 출력할시 중괄호 "{}"사용

 

function MyFirstComponent() {

   const name = 'wookjae'

   return (

       <>

           <div>{name}</div>        

       </> 

   );

}

 

5. JSX에서 Style적용 및 CSS클래스 적용 

 

function MyFirstComponent() {

   const myStyle = {

      backgroundColor: 'black', 

      color: 'yellow',

      fontSize: 20px, 

      padding: 6

   };

   return (

      <>

         <div style={myStyle}>{name}</div>

         <div className="myClass"></div> 

     </>

   );

}