[React 공식 Doc 가이드 #3] Introducing JSX

- 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다.

 

- JSX 는 꼭 써야 하는가?

아래태그는 string 이나 HTML이 아닌 JSX(Java Script eXtension) 이다.

사실 React를 사용할 때 JSX는 필수 Spec은 아니다. JSX를 쓰는데는 크게 2가지 이유가 있는 것 같다.

 

1. Javascript Code 안에 UI 관련코드가 들어 갈 때 가독성을 높여준다. JSX 를 안쓰면 아래와 같은 코드를 읽어야 한다.

물론 실제 Project 에서는 위와 같이 쓰지않고, template 엔진을 쓰겠지만 JSX 를 쓰던 다른 template 엔진을 쓰지 않는다면 위와 같이 UI 코드가 Javascript Code 안에 들어가면 눈뽕을 당한다.

 

2. React 의 사상에 부합한다. 
React는 component 기반이라고 소개하고 있다. 과거의 Jsp 코드를 보면 자바 서버 페이지 답게 아주 그냥 서버쪽 변수에 대한 처리와 client 쪽 로직을 섞어서 다 때려넣었다. 마음먹고 짜면 다른사람이 분석할 수 없게 만들어서 밥줄을 놓치지 않을 수 있다.

 

그 후 html과 js를 분리하고, Search 동작이나 기타 조그마한 동작에도 화면 전체를 다시 그려서 서버를 혹사하는 Jsp와는 다르게 ajax나 비동기 통신을 통해서 필요한 부분만 다시 rendering 하기에 이르렀다.

 

html와 js는 관심사의 분리측면으로 볼 때, 기술적인 측면에서 파일이 분리 된 것이라면 React는 html 적인 측면(Rendering) 과 js 를 꼭 분리시키지 않더라도 이를 하나의 component로 놓고 이를 재활용 하는 철학이다. 한 파일에서 rendering 부분과 client logic code가 한꺼번에 있다면 가독성이 좋아야 한다는건 기본조건일 것이다.

---

- JSX 안에 expression 넣기

결과값을 예측하는 것은 어렵지 않다. name 를 선언해놓고 그것을 {}에 wrapping된 JSX 안에 사용하였다. 여기서 말하는expression이란 이란 무엇일까? Javascript expression을 말한다. 즉 {2+2}, {user.firstName}, {formatName(user)} 과 같은 표현식들을 사용할 수 있다는 의미이다.

위의 코드를 보면 JSX 부분은 분리를 했는데 이는 필수적인 사항은 아니지만 가독성을 위한 것이다. 그리고 JSX를 쓰면서 (); 로 묶어준 이유는 Javascript의 세미콜론 자동 삽입(ASI) 문제를 방지하기 위한 것이다. 물론 ASI가 세미콜론을 까먹은 줄에서 무조건 발동되는건 아니다. 특정조건이 있는데 자세한 사항은 참조 : https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi 

---

- JSX 자체도 Expression 이다.

컴파일 후에 JSX Expression 은 정규 자바 함수 호출이 되거나 자바스크립트 Object 로 평가된다. 이게 무슨 소리냐면 if문또는 for문 안에서 jsx를 쓸 수 있고, 변수로 할당하거나, argument가 되거나 function의 return이 될 수 있다는 의미이다.

---

- JSX 안에서 Attribute Setting

보통 html 에서는 img 에서 src="" 와 같이 "" 로 감싸지만, expression과 함께 쓸 때는 "{user.avatarUrl}" 와 같이 감싸지 않는다. 

 

<div tabIndex="0"></div> 를 기대했겠지만 tabIndex="{user.tabIndex}" 가 된다.

---

- JSX 안에 Child element 도 넣을 수 있음.

 

---

- JSX 에서 Injection attack 방지 (XSS 공격 방지)

jsp 을 사용해 본 User 라면 무슨말인지 알 것이다. 만약 서버로 부터 온 응답에 <script>alert(1);</script> 과 같은 문자열이 있을 때, jsp 에서 아무 생각없이 ${response.text} 처럼 rendering을 하면 경고창이 뜨면서 script가 injection 된다. jstl 을 사용하면 <c:out value="${response.text}"/> 와 같이 따로 처리를 해줘야 하지만, JSX는 이를 자동으로 방지해준다.

---

- JSX 의 Object 표현

Babel 은 JSX를 React.createElement() 를 호출하여 표현한다. 아래의 두 문법이 동치라는 소리.