React 입문 第五番目 : JSX에 관하여(2)

JSX는 객체다

• JSX가 React.createElement로 바뀌는 과정에서 객체를 반환한다는 것은, JSX 요소 또한 객체라는 얘기가 됩니다.

//JSX
const element = <div className="class">Velog is great</div>

//반환 되는 객체의 모습 
{
  type: 'div',
  props: {
    className: "class",
    children: "Velog is great"
  }
}

짚고 넘어가자면, 이 객체가 리액트가 가상 DOM에 유지시키는 UI의 조각이라고 보시면 됩니다.

그럼, JSX가 객체라는 말은 객체처럼 다룰 수 있다는 말이 되는데 어떤 것이 가능한지 보겠습니다.

1. 변수에 할당할 수 있다.

const element = <div className="class">I love Velog</div>;

2. 함수에서 반환 시킬 수 있다.

function getElement(){
 return <div className="class">I love Velog</div>
 }

3. 조건적으로 다른 요소를 반환할 수 있다.

function getElement(love) {
    if (love) {
        return <div className="class">I love Velog</div>
    } else {
        return <div className="class">I don't love Velog</div></h1> 
    }
}

만약 이것을 React.createElement로 한다면... 말 안해도 엄청 길어지고 복잡해 질 것을 알 수 있겠죠?

요약

• JSX는 객체이다
• JSX를 객체처럼 다룰 수 있다(변수에 할당, 함수에서 반환)