React | JSX

React

목차

JSX

JSX

1. 특징

   • Javascript에 XML을 추가하여 확장한 문법(= Javascript XML)
   • 작성된 코드는 브라우저에서 실행되기 전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 js 형태의 코드로 변환됨

   //JSX 적용버전
   function App() {
     return (
       <div>
         Hello <b>react</b>
       </div>
     );
   }
   
   //JSX 변환 상태
   function App() {
     return React.createElement(
       "div",
       null,
       "Hello",
       React.createElement("b", null, "react")
     );
   }
   

   
   

2. 장점
   • 보기 쉽고 익숙함
     • HTML 코드를 작성하는 것과 유사하여 가독성이 좋음
   • 더욱 높은 활용도
     • HTML 태그뿐만 아니라 컴포넌트도 JSX 안에서 생성 가능
       
       
3. JSX 문법
   1. 감싸인 요소
      • 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함
   2. 자바스크립트 표현
      • 자바스크립트 표현식 작성 시 JSX 내부에서 코드를 {}로 감싸 실행
   3. If문 대신 조건부 연산자(삼항 연산자)
      • 조건에 따라 다른 내뇽을 렌더링해야하는 경우 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, 조건부 연산자를 사용해야함
   4. And 연산자(&&)를 사용한 조건부 렌더링
   5. undefined 렌더링하지 않기
      • 함수에서 undefined만 반환하여 렌더링하는 코드는 오류가 발생함
   6. 인라인 스타일링
      • JSX의 스타일은 카멜 표기법으로 작성
   7. className
   8. 꼭 닫아야하는 태그
      • <img/>, <input/>, <br/> 같은 단독 태그(self-closing tag)의 경우에는 반드시 태그를 닫아줘야 함
   9. 주석

---

출처

JSX

도서 - 리액트를 다루는 기술 (59p ~)