[React] JSX 문법 및 렌더링

📝 JSX

JSX는 자바스크립트 XML의 약자.
즉, JSX는 자바스크립트를 확장한 문법이며, 그런 만큼, 자바스크립트와 사용법이 많이 비슷하다.
HTML을 React에서 쉽게 쓰기 위해 사용한다.

React는 JSX 문법을 이용해 마크업 언어와 코드의 로직을 따로 분리하지 않고, 두 가지를 포함한 "컴포넌트"를 사용

 

💡 표현식

JSX에서는 "중괄호( { } )"를 이용해, 사용 가능한 표현식들이 있다.

• 먼저, 중괄호를 이용해, HTML 내에 변수를 표현할 수 있다.

const name = 'elice';
const element = <h1> Hello, {name}! </h1>;

• 중괄호를 이용해, 함수 표현식을 넣는 것도 가능하다.

function greeting(){
  return "Hello, elice!";
}

const element = <h1>{greeting()}</h1>;

• 함수 내에서 표현식을 적용할 수도 있다.

function formatGreeting(name){
  return "Hello" + ' ' + name;
}

function getGreeting(user) {
  return <h1>Hello, {formatGreeting("elice!")}!</h1>;
}

 

💡 속성

• 큰 따옴표를 이용해 JSX의 속성을 지정할 수 있다.

const element = <a href = "https://kdt.elice.io/explore">엘리스로 이동</a>;

 

💡 자식 정의

• 자식 태그가 여러개 포함된 코드를 저장하기 위해서는, 자식 태그를 부모 태그로 감싸야 한다.

const element = (
  <div>
    <h1>Hello,</h1>
    <h2>elice!</h2>
  </div>
);

// <div> = 부모 태그
// <h1>,<h2> = 자식 태그

• 모든 태그는 반드시 닫혀야 한다. 다만, 원래 태그 이름을 맞춰서 </input> 처럼 닫아야 하지만
  이름은 생략하고 />만 이용해서 닫아도 괜찮다.

const element = <input type="text" />;

 

💡 객체 표현

React.createElement( ) 메소드를 이용하면, JSX 문법을 이용하지 않고, 객체로 표현할 수 있다.
두 코드는 문법이 다르지만, 같은 내용을 담고 있다.

• HTML 직접생성

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

• React.createElement( ) 로 생성

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

 

📝 엘리먼트 렌더링

Element ( 엘리먼트 ) : React 앱의 가장 작은 단위, 컴포넌트(Component의 구성요소)

쉽게 말하면, HTML 요소라고 할 수 있다.

Rendering( 렌더링 ) : 이러한 element를 화면에 그리는 것

 

💡 ReactDOM과 렌더링

• React는 가상(Virutal) DOM과 실제로, 표시되는 DOM을 유지한다.
• React는 실제 DOM을 추상화하여, 가상 DOM에 만들어두고, 데이터가 업데이트되면 한 번에 렌더링한다.
• 결과적으로, 계속해서 DOM을 렌더링하는 것보다 속도가 빠르다.

ReactDOM.render( ) : 렌더링 함수

• HTML 파일 안에 Id가 root인 요소가 있다고 해보자.

<div id="root"></div>

• 해당 HTML에 텍스트를 넣기 위해, ReactDOM.render( )을 이용해, 다음과 같이 렌더링 한다.

const element = <h1>Hello, elice</h1>;
ReactDOM.render(element, document.getElementById('root'));

// ReactDOM에 렌더링 할꺼다. element를, id = root 인 요소에다가 ~

 

💡 엘리먼트 업데이트

• 엘리먼트는 한 번 생성되면, 수정이 불가능한 불변 객체이다.
• 값을 변경하고 싶으면, 새로운 엘리먼트를 만들어 업데이트 해야 한다.

만약, 시간을 출력하는 기능을 구현하고 싶다면, 매 초마다 렌더링을 해줘야 할 것이다.

function tick() {
  const element = (
    <div>
      <h1>{new Date().toLocaleTimeString()}</h1>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Date 객체의 toLocaleTimeString( ) 메소드를 이용하면, 시간을 반환해주는데, 실제로 시간이 변하는 것을 확인하기 위해서는 setInterval( ) 콜백을 이용해 tick을 계속 호출해야한다.
setInterval( )의 매개변수인 1000은 1초를 의미한다.