React 톺아보기 2편 - JSX

JSX란?

JSX는 JavaScript XML이라고도 하며 자바스크립트의 확장 구문을 뜻합니다. JSX를 사용하면 자바스크립트 코드를 HTML과 유사하게 작성할 수 있게 도와주는 문법 확장입니다.

JavaScript XML

JSX는 개발자가 자바스크립트 코드 내에서 HTML과 유사한 코드를 작성할 수 있게 하는 자바스크립트용 구문 확장자입니다. 원래는 메타에서 React와 함께 사용하기 위해 개발했으나 다른 라이브러리와 프레임워크에서도 채택되어 지금까지 널리 사용되고 있습니다.

한 편, JSX는 별도의 언어가 아니라 컴파일러나 트랜스파일러에 의해 일반 자바스크립트 코드로 변환되는 확장 구문입니다. 또한 HTML과 비슷하지만 몇 가지 차이가 있습니다.

• JSX는 중괄호 를 사용해 HTML과 유사한 코드 내에 자바스크립트 표현식을 삽입합니다.
• HTML 속성과 달리 camelCase로 작성됩니다.

JSX 유무 비교

JSX가 없어도 개발은 가능하나 HTML과 비슷한 문법으로 만들어주기 때문에 개발자들이 쉽게 적응할 수 있으며 이는 가독성 향상과 유지보수 편의성을 가져오고 결론적으로 생산성 증가라는 효과를 가져옵니다. 아래 예시만 봐도 가독성에서 꽤나 차이가 나는 것을 볼 수 있습니다.

// JSX 없이 작성
const element = React.createElement('h1', {className: 'greeing'}, 'Hello, world!');

// JSX 사용
const element = <h1 className="greeing">Hello, world!</h1>;

JSX의 장단점

1.장점

• 가독성 : HTML에 익숙한 개발자는 JSX 문법을 더 쉽게 읽고 쓸 수 있습니다.
• 향상된 보안 : < , > 과 같은 위험한 문자를 JSX 코드를 컴파일할 때 다른 문자로 바꿔 더 안전한 자바스크립트 코드를 생성합니다. 이 과정을 데이터 소독 이라고 합니다.
• 강력한 타이핑 : JSX는 강력한 타이핑을 지원하므로 오류가 발생하기 전에 잡아낼 수 있습니다.
• 컴포넌트 기반 아키텍처 : JSX는 컴포넌트 기반 아키텍처를 권장하는데, 이는 코드를 보다 모듈화하는데 도움이 됩니다.
• 범용성: JSX는 React 뿐 아닌 다른 라이브러리와 프레임워크에서도 널리 사용되고 있습니다.

2.약점

• 러닝커브 : JSX에 익숙하지 않으면 배우는데 시간이 걸릴 수 있습니다.
• 전용 도구 필요 : JSX 코드를 실행하려면 일반 자바스크립트 코드로 컴파일해야 하기 때문에 전용 빌드 도구가 필요합니다.
• 자바스크립트 호환성 부족 : JSX는 인라인 표현식을 지원하지만 인라인 블록은 지원하지 않습니다. 즉, switch나 if 블록은 가질 수 없습니다.

내부 동작

JSX뿐 아니라 코드 조각라는 단순한 텍스트를 컴퓨터가 이해하도록 하려면 어떻게 해야할까요? 이 때 방법은 컴파일러를 사용해 코드를 컴파일 하는 것입니다. 컴파일러는 특정 규칙에 따라 고급 프로그래밍 언어로 작성된 소스코드를 구문 트리로 변환하는 소프트웨어입니다. 여기서 구문 트리란 문자 그대로 자바스크립트 객체 같은 트리 자료 구조입니다.

JSX는 브라우저에서 직접 사용할 수 없습니다. 브라우저가 직접 이해 못하기 때문에 특수한 구문 분석기를 통해 구문 트리로 컴파일 하는 빌드 단계가 필요합니다. 그 후 바닐라 JS로 변환되어 최종 배포용 번들에 포함되는데 이 과정을 트랜스파일 한다고 합니다.

흔히 아는 Babel 같은 트랜스파일러를 사용하여 JSX를 JavaScript 코드로 변환하는 것입니다. 즉, 결론적으로 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 과정을 트랜스파일이라고 합니다.

// 예시
const element = <h1>Hello, World!</h1>;

// 컴파일 후
// 'h1' : 생성할 태그 이름, null : props, 'Hello, World!' : 자식 요소
const element = React.createElement('h1', null, 'Hello, World!');

JSX 문법 특징

JSX는 엄밀히 말하면 JavaScript의 확장 문법이기 때문에 다음 규칙을 따릅니다.

1. 하나의 부모 요소로 감싸야 한다.

// 틀린 예시
return (
    <h1>Hello, World!</h1>
    <p>Goodbye, World!</p>
);

// 올바른 예시
return (
    <div>
        <h1>Hello, World!</h1>
        <p>Goodbye, World!</p>
    </div>
);

2. class가 아니라 className

<div className="wrapper">Hello</div>

3. JavaScript 표현식 사용은 중괄호

{} 안에는 값, 함수 호출, 삼항 연산자 등 다 넣을 수 있습니다. 그러나 if,for 같은 문은 직접 넣을 수 없다는 특징이 있습니다.

const name = "wiz"
return <h1> Hello, {name}! </h1>;

4. 속성 값에도 표현식 사용 가능

const id = "username";
<input id={id} />;

5. 태그는 꼭 닫아야 한다.

결론

JSX 없이도 React를 사용할 순 있지만 생산성과 가독성을 고려한다면 JSX를 사용하지 않는 것은 상상하기 어렵습니다. 다시 한 번 정리하자면 JSX는 HTML처럼 보이지만 사실 JavaScript이며 데이터와 UI를 자연스럽게 연결할 수 있는 중요한 확장 구문입니다.

JSX는 앞서 1편에서 볼 수 있는 React의 핵심 철학인 데이터 중심 UI 설계와 업데이트 등을 가능하게 한 혁신적인 문법이라고 할 수 있습니다. 그냥 단순하게 사용하기만 했는데 이참에 공부해보면서 React의 철학과 JSX의 중요성에 대해 더 깊이 생각해보니 같은 코드를 보아도 다르게 보이는 것 같습니다. 앞으로 JSX를 사용할 때 더욱 정확하게 이해하고 사용할 수 있도록 노력해보겠습니다.