JSX란?

JavaScript + XML

• Javascript를 확장한 문법
• Javascript의 모든 기능이 포함되어 있으며, React Element(화면에 그려지는 HTML적 요소)를 생성하기 위한 문법.

사용해보기

• 리액트에서는 딱 하나의 html파일만 존재한다. --public폴더 > index.html

  • index.html에는 root라는 div가 하나 있다.
  • index.js에서는 root에 App.js를 렌더링 시킨다.
    • index.html(화면)과 App.js(컴포넌트)를 연결해주는 다리 기능
    • App.js 파일 안에 있는 JSX(html적 요소)을 public에 있는 index.html에 넣어달라고 명령
  • App.js에서는 실제로 사용자에게 보여줄 화면을 정의한다. -> React는 결국 화면에 App.js를 보여주게 된다.

• 리액트에서 뷰를 그리는 방법? JSX문법을 사용해서 react요소를 만들고 DOM에 렌더링 시켜서 그린다.

• 컴포넌트에서 반환할 수 있는 엘리먼트는 오직 한개. 따라서 전체를 하나로 감싼 태그가 필요하다.

• JSX에서 javaScript 값을 가져오려면 중괄호를 쓴다.

  function App() {
      const cat_name = 'perl';
    return (
      <div>
        hello {cat_name}!
      </div>
    );
  }	

  값 가져올 때 뿐만 아니라 map, 삼항연산자 등 자바스크립트 문법을 JSX안에 쓸 때도 {}를 이용할 수 있다.

• class대신 className : JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 className을 사용한다. (id는 그냥 id)

• 인라인으로 style주기 : css문법 대신 json형식으로 넣어준다.

  // 중괄호를 두 번 쓰는 이유? 객체도 자바스크립트이기 때문에!
  // 이렇게 쓰거나,
  <p style={{color: 'orange', fontSize: '20px'}}>orange</p>
  
  // 혹은 스타일 객체를 변수로 만들고 쓸 수 있음.
  function App() {
    const styles = {
      color: 'orange',
      fontSize: '20px'
    };
  
    return (
      <div className="App">
        <p style={styles}>orange</p>
      </div>
    );
  }