JSX를 정리하기에 앞서 간단히 리액트를 정리해보자. 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다. 하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 것을 가능케하는 프레임워크다.
이 리액트는 3가지의 대표적인 특징을 가지고 있다.
1. JSX 문법
2. Component 기반
3. Virtual DOM
이번엔 먼저 JSX에 대해 알아보도록 하자.
쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 그것이 바로 JSX다!
어렵게 말해 JavaScript eXtension.. JavaScript의 확장 버전이고 결론은 자바스크립트이다.
"React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." (나무위키曰)
즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 주고 있다.
다음의 예제를 보자.
HTML이 .js의 변수에 저장되어 있다. 변수에 저장할뿐만 아니라 함수의 인자로도 넘길 수 있다.
JSX의 자세한 설명이 필요하다면 공식문서를 보고 다시 돌아오자.
HTML을 JavaScript 내부에서 사용하는 것이므로 몇 가지 지켜야 할 규칙이 있다.
다음에서 하나씩 짚어보도록 하자.
예를 들어, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 한다.
HTML에서 input이나 br을 사용할 때 태그를 닫지 않는 경우가 있다. 하지만 리액트에서는 반드시 클로징 태그를 써줘야 한다.
항상 닫혀있어야 하기 때문일까....? 어떤 태그든 셀프 클로징이 가능하다.
다음과 같이 쓸 수 있다.
아래 처럼 div가 이어진 형태로는 작성할 수 없다.
그래서 반드시 div나 Fragment태그로 감싸진 형태여야 한다.
변수를 먼저 렌더 안에서 정의하고 리턴에서 변수명을 중괄호로 감싼 형태로 표현한다.
html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.
엘리먼트는 React의 가장 작은 단위입니다. 엘러먼트는 화면에 표시할 내용을 담고 있습니다. 브라우저 DOM 엘리먼트와는 다르게 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. (공식문서)
React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.
위의 그림을 보면 전체 HTML이 업데이트 되는 것이 아니라 변화하는 부분의 엘리먼트만 바뀌는 것을 알 수 있습니다.
정리를 너무잘하시네요! 감사합니다. 덕분에 이해했어요~