[React][리액트를 다루는 기술] JSX에 대해 알아보자

uddi·2023년 3월 8일
0

React

목록 보기
3/16

JSX란?

JSX는 JS의 확장 문법이다. (XML과 매우 비슷하게 생겼음)

JSX 형식으로 작성한 코드는 브라우저에서 실행되기 전, 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS 형태의 코드로 변환된다.

어떻게 변환되는지 확인해보자

function App() {
	return (
    	<div>
        	Hello <b>react</b>
        </div>
    );
}

위와 같은 코드는 어떻게 변환될까?

function App() {
	return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

두 개의 코드를 비교했을 때 딱봐도 JSX를 사용한 코드가 더 직관적이고 간편하다.
이처럼 JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있다는 장점이 있다.

JSX는 리액트로 프로젝트를 개발할 때 사용되기 때문에 공식적인 JS 문법이 아니다.

JSX의 장점

JSX의 장점은 크게 두 가지로 나눌 수 있다.

1. 보기 쉽고 익숙함

앞서 두 코드를 비교했을 때 느꼈던 것처럼 JSX를 사용한 코드가 가독성도 높고 사용하기 편리하다.
👉 JSX를 사용하는 주된 이유다.

2. 높은 활용도
JSX에서는 프론트엔드 개발자라면 너무나 익숙한 HTML 태그를 사용할 수 있으며, 앞으로 만들 컴포넌트도 JSX 안에서 작성할 수 있다.

JSX 문법

JSX를 사용하기 위한 몇 가지 규칙을 알아보자

- 감싸인 요소

컴포넌트에 여러 요소가 있으면 반드시 하나의 부모 요소로 감싸야 한다.

❌ 잘못된 예시

function App() {
	return (
    	<h1>리액트 안녕!</h1>
        <h2>잘 작동하니?</h2>
    );
}

⭕ 올바른 예시

function App() {
	return (
    	<>
        	<h1>리액트 안녕!</h1>
        	<h2>잘 작동하니?</h2>
        </>
    );
}

왜 하나의 요소로 감싸줘야 할까?
👉 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하기 때문

- JS 표현

JSX는 단순히 DOM 요소를 렌더링하는 기능뿐만 아니라 JS 표현식을 쓸 수 있다.
사용 방법은 JS 값을 { }로 감싸주면 된다.

function App() {
	const name = '리액트';
    return ( 
    	<>
        	<h1>{name} 안녕!</h1>
            <h2>잘 작동하니?</h2>
        </>
    );
}

- if 문 대신 조건부 연산자(=삼항 연산자) 사용

JSX 내부의 JS 표현식에서 if 문을 사용할 수 없다. 그렇다면 어떻게 해결할 수 있을까?
1. JSX 밖에서 if 문을 사용하여 사전에 값을 설정
2. { } 안에 조건부 연산자 사용

function App() {
	const name = '리액트';
    return (
    	<>
        	{name === '리액트' ? (
            	<h1>리액트입니다.</h1>
            ) : (
            	<h2>리액트가 아닙니다.</h2>
            )}
        </>
    );
}

name의 값을 리액트가 아닌 다른 값으로 변경하면 '리액트가 아닙니다.' 라는 문구가 나올 것이다.

- AND 연산자(&&)를 사용한 조건부 렌더링

특정 조건을 만족하지 않을 때 아예 아무것도 렌더링 하지 않아야 할 때 사용하면 좋다.

function App() {
	const name = '뤼액트';
   	return <>{name === '리액트' && <h1>리액트입니다.</h1>}</>;
}

조건부 연산자로 구현할 수도 있지만 && 연산자를 사용하면 더 간결하게 구현할 수 있다.

&& 연산자로 조건부 렌더링을 할 수 있는 이유
👉 리액트에서 false를 렌더링할 때 null과 마찬가지로 아무것도 나타나지 않기 때문

⚠️ falsy한 값인 0은 예외적으로 화면에 나타난다는 것에 주의

const number = 0;
return number && <div>내용</div>

위 코드의 출력으로 화면에 숫자 0이 보여지게 된다.

- OR 연산자(||)를 사용하여 undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다.

❌ 잘못된 예시

function App() {
	const name = undefined;
    return name;
}

위 코드는 오류를 반환한다. 이러한 오류를 방지하기 위해 OR 연산자를 사용하면 된다.

⭕ 올바른 예시

function App() {
	const name = undefined;
    return name || '값이 undefined입니다.';
}

JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

function App() {
	const name = undefined;
    return <div>{name}</div>;
}

- 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는
1. 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어야 한다.
2. 스타일 이름 중에서 - 문자가 포함되어 있으면 카멜 표기법으로 작성해야 한다.

function App() {
	const name = '리액트';
    return (
    	<div
        	style={{
            	backgroundColor: 'black',
                fontSize: '48px',
                padding: 16
            }}
        >
       	{name}
        </div>
    );
}

예시처럼 단위를 생략했을 때 기본 단위는 px 이다.

- class 대신 className 사용

class 속성을 사용하는 HTML과 달리 JSX에서는 className 속성을 사용한다.
class로 사용하면 경고창이 뜬다고 하니 className 속성을 사용하도록 하자

- 꼭 닫아야 하는 태그

HTML 코드를 작성할 때 아래의 예시처럼 태그를 닫지 않은 상태로 작성하기도 한다.

<form>: <br>
    <input><br>
    이름: <br>
    <input>
</form>

이렇게 작성해도 HTML에서는 문제없이 작동하지만 JSX에서는 태그를 닫지 않으면 오류가 발생한다.

self-closing 태그 : 태그를 선언하면서 동시에 닫을 수 있는 태그

- 주석

JSX 내부에서 주석을 작성할 때는 {/* */}와 같은 형식으로 작성하면 된다. 또한 {/* */} 내부에서 // 형태의 주석도 작성할 수 있다.

정리

JSX는 HTML과 비슷하면서도 완전히 같지는 않다. 코드는 XML 형식이지만 실제로는 JS 객체이며, 용도도 다르고 문법도 조금씩 차이가 난다.

리액트에서 가장 기본적인 JSX에 대해 알아보고 문법에 대해서도 간단히 공부해보는 시간이었다.

HTML과 매우 유사한 구조를 가지고 있기 때문에 배우는 데 크게 어려움은 없을 것이라고 생각한다.

profile
거북이는 느리지만 결국 결승선을 통과한다

0개의 댓글