[Epic React] React.createElement, jsx와 바벨

Get Really Good at React | Epic React by Kent C. Dodds

https://epicreact.dev/learn/

해당 수업을 내돈내산하여 공부한 내용이다.

props를 어떻게 사용해야 가장 성능에 영향을 안주는지 알아보자.

우리가 리액트로 개발하며 주구장창 만드는 jsx 컴포넌트는 바벨에 의해 컴파일되어 React.createElement로 변환된다.

 

정말 기본중의 기본인 두 가지 사용법을 보고가자.

첫번째는 2개 파라미터. 두번째에 props 객체 때려넣기

세번째는 prop을 null로 지정하고, 세번째 인자에 children 넣기

    ReactDOM.render(div(), document.getElementById('root'))
    function div() {
      const elementProps = {
        id: 'element-id',
        className: 'container',
        children: [span('hello'), ' ', span('world')],
      }
      return React.createElement('div', elementProps)
    }
    function span(text) {
      return React.createElement('span', null, text)
    }

이전에 컴포넌트를 동기 체이닝으로 만들었을 때와 다르게 React 함수를 사용하면 생각했던 대로 만들어진다.

 

그리고 아래 문법을 한번 더 보고가면

    const children = 'hello world'
    const className = 'container'
    const props = {children, className}

    const element = <div {...props} />

바벨이 React.createElement를 이용할 때, Object.assign을 이용하여 props를 복붙하는 것을 볼 수 있다.

 바벨의 마법?

이걸 보니 babel REPL에서 테스트 해보고 싶은게 생각났다.

이놈은 이렇게 컴파일된다.

스프레드와 prop을 동시에 사용하면 매번 새 객체를 만든다

반대로 리터럴만 써도 매번 새로운 오브젝트 리터럴을 생성하는 것을 볼 수 있다.

함수형 컴포넌트는 state가 변경된 컴포넌트부터 자식들을 통째로 다시 렌더링한다.

props가 변경될 경우도 자식들의 리렌더링이 일어난다.

React.memo()를 통한 최적화를 고려한다면?

항상 얕은 복사를 검사하기 때문에 이 경우는 객체 새로 만들어지는것만 조심하면 된다.

 

결론 : React.memo()를 사용하여 함수형 컴포넌트를 최적화 한다면

1. props 전체를 spread로 전부 때려박는건 성능에 문제가 생기지 않는다. (바벨이 참조로 컴파일한다.)

2. props 전체를 리터럴로 하드코딩 하는것은, 객체같이 매번 새로 생성되는 것들을 조심해야 한다. (얕은 복사를 검사하기 때문. - useMemo와 useCallback)

3. 섞어 쓰는 경우도 주의해야 한다.

 

참고 :Optimizing React: Virtual DOM explained — Martian Chronicles, Evil Martians’ team blog

Optimizing React: Virtual DOM explained — Martian Chronicles