3화: Writing Markup with JSX

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

Unsplash 의 Sergio Otoya 님 사진

JSX란?

• 자바스크립트 파일 안에서 HTML스러운 마크업을 사용할 수 있게 해주는 구문 확장자
• 기존: 내용을 HTML에, 디자인을 CSS에, 로직을 JS에 담았음 - 기술에 따른 분리
• 웹에 실시간 상호작용이 늘어나면서 로직이 내용을 결정하는 경우가 많아짐
• 그래서 리액트는 컴포넌트를 이용해 로직과 내용을 함께할 수 있도록 함 - 관심사에 따른 분리
• 리액트 컴포넌트는 JSX라는 구문 확장자를 이용해서 내용(마크업)을 표현함
• JSX는 HTML과 유사하지만 더 깐깐하고 동적 정보를 표현할 수 있음

JSX와 리액트는 다르다

• 이 둘은 서로에 관계없이 독립적으로 사용할 수 있다.
• JSX는 구문 확장자
• 리액트는 자바스크립트 라이브러리
• JSX는 컴파일러에서 자바스크립트 함수로 바뀜. 이 함수는 리액트 없이도 동작 가능하도록 2019년에 개선됨

HTML을 JSX로 바꾸기

• JSX는 HTML과 유사하지만 규칙이 더 까다로움. valid HTML이라도 그대로 쓴다면 JSX는 오류를 뱉을 수 있음
• 귀찮으면 변환기를 찾아서 써도 됨

JSX의 규칙

1. 반환값은 single root element

• 컴포넌트에서 여러 element를 반환하고 싶다면 하나의 부모 tag로 감싸야 함
• 태그를 하나 더 쓰기 싫다면 Fragment (<></>)를 쓰자
• JSX는 HTML처럼 보여도 근본은 그냥 자바스크립트 함수임
• 함수에서 두 개 이상의 값을 반환하려면 배열로 감싸거나 해야 하잖슴. 그거랑 같은 이유임

2. 모든 태그는 닫기

• 명시적으로 닫는 태그는 무조건 써야 함.
• <img />
• <li>참새짱</li>

3. 거의 대부분의 attribute는 camelCase로

• JSX는 자바스크립트와 JSX attribute를 자바스크립트 object의 key로 바꿈
• 자바스크립트 변수명에는 dash('-')나 예약어(예. 'class)를 사용할 수 없음
• 하지만 이런 attribute에 접근하고 싶을 수가 있음
• 그래서 리액트에서 많은 html과 svg attribute들은 camelCase로 쓰여 있음
• 역사적인 이유로 aria-*나 data-*는 dash를 사용함

읽고 나서

사실 자바스크립트 object의 key에는 dash를 쓸 수 있는데 왜 안된다는 거지? 라는 궁금증이 있었다(이 글을 쓰는 도중에도).

 

그걸 찾아보려고 다른 웹페이지를 돌아다니다가 실수로 이 글을 쓰던 창을 닫았다! 근데 임시저장이 아예 안 돼 있어서 처음부터 다시 써야 했다. 오히려 좋아. 다시 쓰면서 처음의 궁금증이 해소되었다.

 

object의 key로는 dash를 쓸 수 있다. 자바스크립트 object에서 대괄호를 이용한 dynamic property lookup을 사용한다면 충분히 가능하다. aria-*나 data-*는 dash를 썼다는 점에서도 유추할 수 있다.

 

하지만 이게 문제가 아니었다.

우리가 리액트 컴포넌트에서 props를 받을 때를 생각해 보자. props는 객체고, 이걸 구조분해할당해서 attribute에 접는하는 경우가 많다.

근데 dash를 쓴 key를 구조분해할당으로 받아올 수 있는 방법이 떠오르지 않는다. 그래서 공식 문서에서 자바스크립트 변수명의 한계라고 적어 놓았구나, 라는 깨달음을 얻었다.