react jsx

JSX

• XML은 특성을 이용한 요소 트리로 UI를 표현하는 데 아주 적합하다.
• 애플리케이션의 구조를 시각화하기 쉬우며 더 간결하다.
• 일반 자바스크립으므로 언어의 의미를 변형시키지 않는다

HTML 차이

• 태그 특성은 낙타 표기법으로 작성한다.
• 모든 요소는 짝이 맞아야 한다.
• 특성 이름은 HTML 언어 사양이 아닌 DOM API에 기반을 둔다.

단일 루트 노드

리턴 되는 값은 단일 노드 이어야 한다.

사용불가

 return(
   <h1>Hello world</h1>
   <h1>Hello world</h1>
 )

사용가능

 return(
  <div>
   <h1>Hello world</h1>
   <h1>Hello world</h1>
  </div>
 )

조건절

if 문을 사용할 없지만 삼항식은 사용이 가능하다.

 render(){
   return(
     <div className={condition ? "salutation" : ""}>
     </div>
   )
 }

조건절을 JSX 바깥쪽으로 옮기면 if사용 가능하다.

 render(){
  let className;
  if(condition){
    className = "salutaion";
   }
  return(
   <div className={className}>Hello world</div>
  )
 }