JSX

[개념]

• JavaScript의 확장(extend) 문법으로 XML과 매우 유사
• React 메서드를 위한 문법적 개선
• JSX는 JS 문법이 아니기 때문에 Babel을 사용하여 일반 JS코드로 변환
  (Babel은 JSX를 React.createElement() 호출로 컴파일)

---

[장점]

• 가독성과 사용성이 좋다. (개발자 경험 개선)
• JS와 유사하여 배우기가 쉽다.
• 문법 오류와 코드량 감소

---

[기본 문법]

# 1. 모든 태그는 꼭 닫혀있어야 한다

<input> </input>
<input /> : 셀프 클로징 태그  

---

# 2. 두 개 이상의 엘리먼트는 하나로 감싸줘야 한다.

<div>
       <div>test1</div>
       <div>test2</div>
</div> 
 : 불필요하게 사용되는 <div>가 맘에 들지 않으면 <Fragment> 사용 가능!
   Fragment는 간단하게 <> </>로 대체 가능! 

<Fragment> = <>
        <div>test1</div>
        <div>test2</div>
</Fragment> - </>

---

# 3. 표현식 사용하기

     : {}(중괄호) 사용으로 값을 사용할 수 있다.

 const name = ‘react’; 
    <div>
      hello {name}
    </div>

---

# 4. 조건부 렌더링

     : 바로 if문을 쓸 수 없어서 '삼항 연산자'로 사용 가능!

<div>
    {
       1+1 === 2
       ? ‘맞다’
       : ‘틀리다’
    }
</div> 

---
혹은 여러 연산이 있는 경우에는 함수를 선언하고 바로 사용하여 구현 가능!
<div>
    {
       (
           function(){ // () =>처럼 화살표 함수로도 구현 가능!
             if (value === 1) return <div> 1이다 </div>
             if (value === 2) return <div> 2이다 </div>
             if (value === 3) return <div> 3이다 </div>
                return <div> 없다 </div>
           }
       )()
    }
</div>  

---

# 5. CSS 스타일 적용

     : 스타일을 객체로 만들어 표현식으로 사용!
(기존방법)

.green {
   background : green;
   padding: 1rem;
   color : white;
       }
<div style=“green“> green </div>
or
<div style=“background : blue; color: white”> green </div>

---

(JSX 사용 시)

const style = {
          backgroundColor : ‘black’,
          padding : ‘16px’,
          color : ‘white’
              }
  <div style={style}> // 이렇게 사용!
       안녕하세요~!
  </div>

---

# 6. JSX에서 css class 사용

import ‘./App.css’;
 const style = {
         backgroundColor : ‘black’,
         padding : ‘16px’,
         color : ‘white’
               }
 <div style={style} className=“App”> //class(X), className(O)
       안녕하세요~!
 </div>

---

# 7. JSX에서 주석 사용하기

     : 렌더링 하는 render()에서 는 일반 주석 사용 X

1) {}(중괄호) 사용
  {/* 주석에 들어갈 내용 */}

2) 태그에 사용
  <h1 // 주석 내용 >

 주로 1) 방법을 많이 사용한다!

---