TIL) JSX란? JSX 쓰는 이유, JSX 문법

JSX란?

 

JavaScript XML 

리액트에서 UI를 구성할 때 사용하는 문법으로 JS를 확장한 문법이다. 

 

 

JSX는 브라우저가 바로 실행할 수 있는 JS코드가 아니라서 브라우저가 이해할 수 있는 JS 코드로 변환시켜줘야한다. 

이때, Babel을 사용한다. 

Babel가 JSX를 브라우저가 이해할 수 있는 JS로 컴파일한다.

컴파일을 하면 브라우저가 JS를 읽고 화면에 렌더링할 수 있게 된다. 

 

JSX를 사용하면 JS만으로 마크업 형태의 코드를 작성해서 DOM에 배치할 수 있게 된다. 

(CSS, JSX 문법만을 가지고 웹 어플리케이션 개발 가능!)

 

주의할 점! JSX은 HTML처럼 생겼지만, HTML이 아니기 때문에 “Babel”을 이용한 컴파일 과정이 필요하다. 

 

 

JSX를 왜 써야하지?

DOM 코드보다 명시적으로 코드를 작성 가능하기 때문에 복잡성은 줄이고, 가독성을 높일 수 있다. 

 

(JS문법과 HTML 문법을 동시에 이용해서 기능과 구조를 한눈에 확인 가능하다.)

 

컴포넌트 : 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋이다. 

 

 

👇if (JSX 없이 리액트 개발){

    복잡하고, 가독성이 떨어진다. 

}

return React.createElement(
	'hi', null, `Hello, ${formatName(user)}!`
)

 

 

👇if (JSX 로 리액트 개발){

    복잡성은 줄이고, 가독성이 좋아진다. 

}

return <h1>Hello, {formatName(user)}!</h1>;

 

---

JSX 문법

 

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

 

⭕️

<div>
	<div>
    	<h1>Hello<h1>
	</div>
	<div>
    	<h2>World<h2>
	</div>
</div>

 

❌

	<div>
    	<h1>Hello<h1>
	</div>
	<div>
    	<h2>World<h2>
	</div>

 

**꼭 <div></div>처럼 엘리먼트를 사용하지 않고, <></>처럼 빈 엘리먼트를 사용해도 된다. 

 

2. 엘리먼트 클래스 사용 시, className 으로 표기해야한다.

 

만약 class로 작성한다면, React에서 HTML 클래스 속성 대신 JS 클래스로 받아들인다. 

 

⭕️

<div className='greeting'>Hello!</div>

❌

<div class='greeting'>Hello!</div>

 

 

3. JS 표현식 사용 시, 중괄호 {} 사용해야한다. 

 

JSX에서 JS쓰려면 꼭 중괄호 사용하기!

변수명, 함수명, 이미지 import 명, class 명 등등.. 상상하는 모든 곳에 {} 변수 집어넣기 가능!

style 속성 집어넣을때 style={object 자료형으로 만든 스타일}

ex)

<div style={{color:'blue', fontSize:'30px'}}></div>

중괄호 안쓰면 일반 텍스트로 인식한다.

-대시바 못쓴다. camelCase로 써야한다. 

 

 

4. 사용자 정의 컴포넌트는 대문자로 시작한다. 

 

React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 한다.

소문자로 쓰면 일반적인 HTML 엘리먼트로 인식한다.

이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부른다.

 

⭕️

function Hello() {
	return <div>Hello!</div>
}
function HelloWorld() {
	return <Hello />
}

❌

function hello() {
	return <div>Hello!</div>
}
function HelloWorld() {
	return <hello />
}

 

 

5. 조건부 렌더링에는 삼항연산자를 사용한다.

 

if문 말고 삼항연산자 사용하기!

 

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

 

추가학습 필요 

삼항연산자

 

 

6. 여러개의 HTML 엘리먼트 표시할 때, map() 함수를 이용한다. 

 

const posts = [
	{id:1, title:'Hello World', content:'Welcome to learning React!'},
    {id:2, title:'Installation', content:'You cna install React from npm'}
];

function Blog() {
	const content = posts.map((post) => 
    	<div key={post.id}>
        	<h3>{post.title}</h3>
            <p>{post.content}</p>
        </div>
    );
        
    return (
    	<div>
        	{content}
        </div>
    );
}

 

map() 함수를 사용할 때는 반드시 'key' JSX 속성을 넣어야한다. 

 'key' JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 뜬다. 

 

- 데이터의 id를 key로 사용할 수 있다. 

- 변하지 않고, 예상 가능하며, 유일한 id가 없으면 항목의 인덱스를 key로 사용한다. 

- 컴포넌트의 최상위 엘리먼트에 key 속성을 작성해야한다.