React 공식문서 보기 - 2 (JSX, 엘리먼트 렌더링)

1. JSX 문법

const element = <h1>Hello, world!</h1>;

마치 마크업 문법같이 생긴 이 문법은 JSX라고 한다.

 

JSX는 React.createElement() 함수 호출로 바뀐다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

 

위의 두 가지 코드는 동일하다.

 

첫 번째 코드는 JSX로 표현한 코드고 두 번째 코드는 React.createElement()를 사용한 코드다.

 

JSX를 사용해서 쓰는것이 코드의 가독성도 좋고 HTML과 모습이 닮아서 보다 쉽게 코드를 작성할 수 있다.

 

 

2. 엘리먼트 렌더링

 

처음 리액트 프로젝트를 만들면

index.html 안에 <div id="root"></div> 가 있는 걸 볼 수있다.

 

그리고 이 html에 연결된 index.js 파일에 

ReactDOM.createRoot()를 볼 수 있는다 

React 엘리먼트를 렌더링 ( 화면에 띄우기 ) 위해서는 DOM 엘리먼트를 .createRoot()에 전달한 다음에

React 엘리먼트를 root.render() 에 전달해야 한다.

 

렌더링 된 엘리먼트 업데이트하기

 

React 엘리먼트는 불변객체이다. 엘리먼트는 마치 영화의 한 프레임처럼 특정 시점의 UI를 보여준다.

 

그러면 UI를 새로 업데이트는 어떻게 할까..?

 

지금까지 본 내용으로는 새로운 엘리먼트를 생성하고 이를 root.render()로 전달해서 계속 호출하는 방법만 있다.

 

예를 들어서 실시간으로 시간을 1초단위로 보고싶다면?

 

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

 

이렇게 setInterval을 통해서 콜백함수로 1초마다 root.render()에 엘리먼트를 넣어주면서 계속 호출해줘야 한다.

 

실무에서 React를 사용할 때는 root.render()를 한 번만 호출한다.

 

한 번만 호출하는데 어떻게 화면이 계속 바뀌지?

 

이에 대한 해답은 후에 배울 State와 생명주기에서 어떻게 되는지 알아보자!

 

그리고 위의 코드를 실행해보면 Hello World는 그대로이지만 시간을 나타내는 부분만 업데이트 하는 모습을 볼 수 있다.(F12 또는 개발자 도구를 켜서 Elements를 보면 1초마다 업데이트 되는 걸 볼 수 있음)

 

React DOM은 이전의 엘리먼트와 비교하고 필요한 부분만 DOM을 업데이트 해준다.

 

오늘은 JSX와 엘리먼트 렌더링에 대해서 살펴봤다!

 

 

Ref :

https://ko.legacy.reactjs.org/