React what is JSX? (번역글) 🤔

이 글은 아래 출처의 글을 번역한 글입니다. 오역과 의역을 자주 사용합니다.

 

글 상단의 강의 영상들은 가져오지 못했습니다.
embed 되어있는 강의 영상 자체는 가져올 수 있는데 사이트에 css가 tailwind로 적용되어있어 overhead가 커질것 같아 가져오지 않았습니다.

 

이제 블로그 포스트로 넘어가겠습니다.

 

React를 효과적으로 사용하는 방법을 이해하는데 있어 중요한 부분은 자바스크립트와 자바스크립트 표식을 이해하는 것이라 생각합니다. 그래서 JSX의 일부 예제를 보여드릴거고 JSX가 컴파일된 버전은 어떻게 동작하는지 도움을 줄것 입니다. 머릿속에서 JSX를 컴파일 할 수 있다면 추상화를 좀 더 강력하게 사용할 수 있습니다.

 

간단한 예시가 있습니다.

모든 예제들은 변수에 할당할 수 있는 정규 Javascript 표현식임을 나타내기 위해  변수 `ui`에 할당됩니다.

ui = <div id="root">Hello world</div>
ui = React.createElement('div', {id: 'root'}, 'Hello world')

 

위에서 볼 수 있듯이 jsx는 `React.createElement`로 컴파일 됩니다. `React.createElement` API는 아래와 같습니다

function createElement(elementType, props, ...children) {}

 

• `elementType` 는 문자열이나 생성되어지는 요소의 타입을 위한 함수일 수 있습니다
• `props`는 요소에 적용하기 위한 props 객체 입니다. (`null` 값이 들어올 수도 있습니다)
• `...children`는 요소에 적용하고 싶은 모든 자식들 입니다. 편의상 위와 같이 나와있고 위와 동일하게 아래와 같이도 사용할 수 있습니다

ui = React.createElement('div', {id: 'root', children: 'Hello world'})

 

만약 당신이 하나 이상의 자식을 가지고 있다면 배열을 사용할 수 있습니다.

 

ui = (
  <div>
    <span>Hello</span> <span>World</span>
  </div>
)
ui = React.createElement('div', {
  children: [
    React.createElement('span', null, 'Hello'),
    ' ',
    React.createElement('span', null, 'World'),
  ],
})

// Note: babel uses the third argument for children:
ui = React.createElement(
  'div', // type
  null, // props
  // children are the rest:
  React.createElement('span', null, 'Hello'),
  ' ',
  React.createElement('span', null, 'World'),
)

 

`React.createElement` 를 호출하면 단순한 객체를 얻을 수 있습니다.

 

// <div id="root">Hello world</div>
{
  type: "div",
  key: null,
  ref: null,
  props: { id: "root", children: "Hello world" },
  _owner: null,
  _store: {}
};

 

이러한 객체를 `ReactDOM.render`나 다른 렌더에 전달해 주면 element 객체를 해석하고 DOM node를 생성하는 것이 렌더러의 작업입니다. 깔끔하죠?

 

아래에 당신을 위한 더 많은 예시가 있습니다

ui = <div>Hello {subject}</div>
ui = React.createElement('div', null, 'Hello ', subject)

ui = (
  <div>
    {gretting} {subject}
  </div>
)
ui = React.createElement('div', null, gretting, ' ', subject)

ui = <button onClick={() => {}}>click me</button>
ui = React.createElement('button', {onClick: () => {}}, 'click me')

ui = <div>{error ? <span>{error}</span> : <span>good to go</span>}</div>
ui = React.createElement(
  'div',
  null,
  error 
    ? React.createElement('span', null, error)
    : React.createElement('span', null, 'good to go'),
)

ui = (
 <div>
   {itmes.map(i => (
     <span key={i.id}>{i.content}<span>
   )}
 </div>
)
ui = React.createElement(
  'div',
  null,
  items.map(i => React.createElement('span', {key: i.id}, i.content)),
)

 

`{`와 `}`의 사이에 넣는 것은 그대로 남겨진다는 것을 눈치챌 수 있습니다. 이를 interpolation 이라 부르고  props의 값과 자식들에 변수들을 동적으로 주입할 수 있습니다. 이러한 방식으로 동작을 하기 때문에 interpolation에 넣는 컨텐츠들은 무조건 Javascript 표현식 이여야 합니다. 그것들은 객체 할당의 우측 혹은 함수 호출의 인자에 본질적으로 사용되기 때문입니다.

 

 

Conclusion

좀 더 많은것을 다루어 보고 싶다면 Babel의 온라인 REPL(Read, Eval, Print, Loop)을 시도할 수 있습니다. JSX가 어떻게 동작하는 지 좀 더 이해할 수 있고 좀 더 효율적으로 사용할 수 있도록 도와줍니다. Good luck!

 

 

 

---

출처 : https://kentcdodds.com/blog/what-is-jsx

What is JSX?