[React] 동빈나 React 이론 - 3강 / React에서 JSX란

JSX

• JavaScript 문법의 확장판
• react에서의 요소(Element)를 제공
  • 요소는 tag 같은 것들을 모두 포함하는 HTML 단위이다.
• 마치 js와 html을 한 번에 합쳐 놓은 것 같은 문법

 

코드1

 

분석

function formatInfo(student){ 
  return student.name + "["+student.id+"]";
}
const student = {
  id: "20212195",
  name: "Lee Sanghee",
  color: "blue",
}
const element = (
  <h3 class = {student.color}>
    {formatInfo(student)}  
  </h3>
);

element 변수에는 HTML 태그와 문자열이 포함되어 있는데, 이들이 JSX이다.

html 코드 안에서 어떤 부분이 js코드임을 알리기 위해 중괄호를 사용한다.

babel이 jsx 로더를 갖고 있어서 이런 문법이 동작할 수 있는 것이다.

 

jsx는 중괄호를 이용해 js 구문을 실행할 수 있다. 

또한, 중괄호는 속성의 값으로도 들어갈 수 있다.

코드를 보면 알 수 있듯이 class도 중괄호, 즉 속성 내용으로 들어갈 수 있다. 

 

함수 형태로 작성된 Component는 render() 함수가 생략된 형태로 사용할 수 있다. 

 

ReactDOM.render(element,document.getElementById("root")

이전에는 Component가 Class형이여서 첫번째 매개변수를 <HelloReact/>와 같이 적어주었다. 

이번에는 변수로 작성하여서 위와 같이 적었다.

React DOM은 브라우저의 DOM이 리액트 요소와 매칭될 수 있도록 관리한다.

 

---

❓

여기서 Component가 formatInfo, element 두 개 있는건가?  

맞다면 element 변수형 컴포넌트 안에 formatInfo 함수형 컴포넌트를 불러온 것이고,

그래서 element 컴포넌트를 render시킨것인가

---

코드2

 

분석

function tick() {
  const element = (
  <h3>현재 시각은 [{new Date().toLocaleTimeString()}] 입니다.
      </h3>
    )
  ReactDOM.render(element, document.getElementById("root"));
}

setInterval(tick,1000);

개발자 모드로 확인하면 시각에 해당하는 부분만 다시 렌더링되는 것을 확인할 수 있다.

 

어떠한 함수를 사용하는데, 그 자리에서 element를 정의해서 화면에 그릴 수 있다.

그러나 특정 함수 안에 ReactDOM을 쓰는 일은 드물다고 한다.