리액트(React)_JSX

JSX

• JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다.
• React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다.
• 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있다.

Babel

• JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니기 때문에 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다.
• 이때 이용하는 것이 바로 “Babel”이며,JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일하고 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있습니다.

React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다. 즉, 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들었고, 한눈에 컴포넌트를 확인할 수 있게 되었다.
JSX를 사용하면 JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 된 것이다.
주의할 점은 JSX는 HTML처럼 생겼지만, HTML이 아니기 때문에 앞서 언급했던 “Babel”을 이용한 컴파일 과정이 필요하다.

JS문법

• JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 한다.

• React에서 CSS class 속성을 지정하려면 "className"으로 표기해야 한다. 만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해야 한다.

• JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 한다. 중괄호를 사용하지 않으면 일반 텍스트로 인식한다.

• React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 합니다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 된다. 이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부릅니다.

• 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 한다.

{ 
  (1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)  
}

• React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용한다. map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다.
  "key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.

const content = posts.map(post) =>
<div key = (post.id)>
  <h3>(post.title)</h3>
  <p>(post.content)</p>
  </div>