[공식 문서] JSX 소개

1. JSX문법 변수 선언방식

const element = <h1>Hello, world!</h1>;

 

JSX는 자바스크립트를 확장한 문법이며, JSX는 React의 엘리먼트를 생성한다.

 

2. JSX란?
리액트에서는 렌더링 로직이 (이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터를 준비하는 방식 등)과 연결된다. 

 

3. JSX에 표현식 포함하기

아래 예시에서 name이라는 변수를 선언한 후 중괄호로 감싸 JSX안에 사용해보자.

const name = 'kang'; const element = <h1>hello {name}</h1> ReactDOM.render (    element,    document.getElementById('root') );

JSX 중괄호 안에는 유효한 모든 자바스크립트 표현식을 넣을 수 있다.

 

아래 예시를 통해 자바스크립트 함수 호출이 결과인 formatName(user)을 엘리먼트에 포함시켜보자.

function formatName(user) {      return user.firstName + ' ' + user.lastName; } const user = {    firstName: 'kang'    lastName: 'hongsoon' }; const element = (    <h1>      Hello, {formatName(user)} !     </h1> ); ReactDOM.render(     element,     document.getElementById('root') );

가독성을 위해 JSX를 여러줄로 나누었고, 이때 자동 세미콜론 삽입으로인한 오류 상황을 피하고자

괄호로 묶는것을 권장한다고한다!

 

https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi

What are the rules for JavaScript's automatic semicolon insertion (ASI)?

 

컴파일이 끝나면 JSX표현식이 정규 자바스크립트 함수 호출이 되고 자바스크립트 객체로 인식을 한다.

JSX를 if구문 안에 사용하고 변수에 할당하고 인자로서 받아들이고 함수로부터 반환할 수 있다.

 

4. JSX속성 정의

- 속성에 따옴표를 이용해 문자열을 리터럴 할 수 있다.

 

const element = <div tabIndex = "0"></div>

 

※ 리터럴 이란?

리터럴은 데이터(값) 그 자체를 뜻한다. 즉, 변수에 넣는 변하지 않는 데이터를 의미하는 것.

 

cosnt a = 1 ;

a는 상수이고, 1은 리터럴이다. 

 

- 중괄호를 사용하여 어트리뷰트에 자바스크립트 표현식을 삽입할수 있다.

 

※ 어트리뷰트란? (attribute)

html문서에서 element에 추가적인 정보를 넣을때 사용되는 요소이다.

간단하게 예를들면, <div class="myClass"></div> 에서 div는 element(요소)이며, myClass는 attribute(속성)이 된다. 

 

위와 같은 방식으로 JSX에도 자바스크립트 표현식을 넣을 수 있다.

 

const element = <img src={user.avataUrl}></img>

 

이떄, 중괄호 주변에 따옴표를 사용하면 안된다. 동시에 사용 불가!

또한 JSX는 HTML이 아닌 자바스크립트에 가깝기 떄문에 camelCase 프로퍼티 명명 규칙을 사용해야한다. 

( className 또는 tabIndex 같은 형식)

 

5. JSX 자식 정의

- 태그가 비어 있다면 XML 처럼 /> 를 이용해 바로 닫아줘야한다.

- JSX 태그는 자식을 포함할 수 있다.