'react-dom' / JSX

리액트는 순수 자바스크립트이고 이 자바스크립트를 이용해서 컴포넌트들을 만들어 나간다. 실제로 브라우저는 HTML과 CSS, 순수 자바스크립트만을 이용할 수 있다. 결국 jsx나 다른 코드들이 바벨을 이용해서 순수 자바스크립트로 변환이 된다. 그리고 변환이 된 것들을 우리가 만든 컴포넌트를 HTML과 연결하는 작업을 해 주어야하는데 그것을 할 수 있는 것이 'react-dom'이다. 사용자에게 궁극적으로 배포되어지는 것은 index.html인데 'react-dom'에서 ReactDOM 클래스를 가지고 오고 이 클래스에 있는 렌더 함수를 이용해서 document 페이지에 있는 id가 'root'라는 요소를 가지고 와서 그 요소에 root컴포넌트를 연결시켜준다. 

 

JSX

처음 리액트가 나왔을 때는 JSX가 없었다. 

function App () {
	// return <h1>Hello:)</h1>
    return React.createElement('h1', {}, 'Hello:)')
}

위와 같이 사용해야 했다. 개발자와 디자이너 입장에서는 위와 같이 작성하기 힘들었다. 왜냐 HTML에서는 간편하게 할 수 있으니까. 그래서 자바스크립트 코드 위에서 간단하게 HTML처럼 할 수 있도록 만들어진 게 JSX이다.  

HTML과 JSX의 차이점이 있는데 html의 태그에서 class속성을 jsx에서는 className이라고 표시해야하고 html 태그에서 onclick으로 함수를 연결 할 수 있었는데 jsx에서는onClick으로 해야한다. 일반 HTML과 JSX의 차이점은 HTML은 마크업 언어이고 JSX는 엄밀히 말하면 자바스크립트 코드이다. 나중에 이것을 바벨이 전부 다 HTML과 자바스크립틀 변환하게 되는데 그 말은 JSX는 자바스크립트 코드이다. 즉 이 안에서 자바스크립트 코드의 비즈니스 로직을 작성할 수 있는 게 가장 큰 차이점이다. JSX에서 코드를 쓸 때는 항상 아래와 같이 괄호를 이용해야한다. 

const name = 'jiyoon'
return <h1>Hello! {name}:)</h1>

위와 같이 괄호를 이용하면 로직을 작성할 수 있다. 

그리고 한가지 주의해야되는 점은 리액트에서 render함수나 function함수에서 JSX를 리턴하게 되는데 형제노드를 쓸 수 없다. JSX는 한가지의 태그로 감싸줘야한다. 예전에는 div태그로 감싸줬는데 쓸때없는 div태그의 낭비가 생기니 <React.Fragment>를 이용할 수 있다. 아니면 <></>와 같이 아무것도 작성하지 않으면 Fragment와 같다. 그래서 JSX는 다수의 태그들을 리턴할 수 없기 때문에 형제 노드가 있는 경우에는 묶어 주어야한다. 

JSX는 HTML처럼 간편하게 마크업을 할 수 있고 더 막강한 것은 비즈니스 로직, 자바스크립트 코드와 함께 섞어서 사용이 가능하다.