[React] 리액트 기초 - JSX

 

JSX 문법

자바스크립트와 html을 섞어쓸 수 있는 자바스크립트의 확장판. 

자바스크립트에서 html을 편리하게 활용할 수 있는 문법. 

js의 확장문법이다 보니 주의할 점이 있음. 

속성명을 모두 외울필요는 없음. 

 

i. HTML과 다른 속성명

1. 속성명은 카멜케이스로 작성

JSX 문법에서도 태그에 속성을 지정해줄 수 있다. 단 여러 단어가 조합된 몇몇 속성을 사용할 경우에는 카멜케이스(camel case)로 작성해야한다. 

ex) onClick, onBlur, onFocus, onMouseDown

단, 예외적으로 HTML에서 비표준 속성을 다룰 때 활용하는 data-* 속성은 카멜케이스가 아니라 기존의 HTML문법을 그대로 작성한다. 

 

2. 자바스크립트 예약어와 같은 속성명은 사용할 수 없다. 

JSX문법도 결국은 자바스크립트 문법임. for나 class처럼 자바스크립트 문법에 해당하는 예약어와 똑같은 이름의 속성명은 사용할 수 없다. 그래서 HTML의 for의 경우, htmlFor로 작성하고 class속성도 className으로 작성해야 한다. 

 

※ 참고: https://ko.legacy.reactjs.org/docs/dom-elements.html#differences-in-attributes

 

ii. Fragment 프래그먼트 

반드시 하나로 감싸진 태그를 써야한다. 여러개 요소를 작성하면 오류 발생!!

이럴 때는 여러 태그를 감싸는 부모 태그를 만들어 하나의 요소로 만들어줘야 함. 

<Fragment> 태그를 쓰면됨. 

import { Fragment } from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

<Fragment>

<p>안녕</p> <p>리액트!</p>

</Fragment>,

document.getElementById('root') );

 

아니면 <> </> (단축문법) 가능

 

iii. 자바스크립트 표현식 넣기

중괄호를 사용하면 자바스크립트의 기능을 사용할 수 있음. 

단, JSX문법에서 중괄호는 자바스크립트 표현식을 다룰 때 활용하기 때문에, 중괄호 안에서 for, if문 등의 문장은 다룰 수 없다!! 

 

iv. 엘리먼트

리액트 엘리먼트를 ReactDOM.render 함수의 argument로 전달하게 되면, 리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄움. 엘리먼트는 리액트로 화면을 그려내는 가장 기본적인 요소 

v. 컴포넌트 

리액트 엘리먼트를 컴포넌트로 만들어서 활용할 수 있음!

컴포넌트는 단순히 함수를 만든다고 되는 것이 아니라

함수 이름의 첫 글자를 대문자로 써야 하고, JSX문법으로 만든 코드를 리턴해줘야 함. 

주의할 점은, 사용하지 않은 function이나 element가 index.js 있으면 에러가 뜸.