2장 리액트 핵심 요소 깊게 살펴보기

React Deep Dive  · 

이번 장에서는 리액트를 이루는 핵심적인 개념을 깊게 샆펴보고, 이러한 기능이 자바스크립트를 토대로 어떻게 동작하는지 알아보자.

2.1 JSX란?

2.1.1 JSX의 정의

JSXElement
JSXAttributes
JSXChildren
JSXStrings

2.1.2 JSX 예제

// 하나의 요소로 구성된 가장 단순한 형태
const ComponentA = <A>안녕하세요.</A>
// 자식이 없이 SelfClosingTag로 닫혀 있는 형태도 가능하다.
const ComponentB = <A />
// 옵션을 { }와 전개 연산자로 넣을 수 있다.
const ComponentC = <A {...{ required: true }} />
// 속성만 넣어도 가능하다.
const ComponentD = <A required />
// 속성과 속성을 넣을 수 있다.
const ComponentE = <A required={false} />
const ComponentF = (
    <A>
        {/* 문자열은 큰따옴표 및 작은따옴표 모두 가능하다. */}
        <B text="리액트" />
    </A>
)
const ComponentG = (
    <A>
        {/* 옵션의 값으로 JSXElement를 넣는 것 또한 올바론 문법이다. */}
        <B optionalChildren={<>안녕하세요.</>} />
    </A>
)
const ComponentH = (
    <A>
        {/* 여러 개의 자식도 포함할 수 있다. */}
        안녕하세요
        <B text="리액트" />
    </A>
)

2.1.3 JSX는 어떻게 자바스크립트로 변환될까?

const ComponentA = <A> required={true}>Hello World</A>
const ComponentB = <>Hello World</>
const ComponentC = (
    <div>
        <span>hello world</span>
    </div>
)

var ComponentA = React.createElement(
    A,
    {
    required: true,
    },
    'Hello World',
)
var ComponentB = React.createElement(React.Fragment, null, 'Hello World')
var ComponentC = React.createElement(
    'div',
    null.
    React.createElement('span', null, 'heUo world'),
)

2.1.4 정리

2.2 가상 DOM과 리액트 파이버

2.2.2 가상 DOM의 탄생 배경

2.2.3 가상 DOM을 위한 아키텍처, 리액트 파이버

리액트 파이버란?
function FiberNode(tag, pendingProps, key, mode) {
    // Instance
    this.tag = tag
    this.key = key
    this.elementType = null
    this.type = null
    this.stateNode = null
    // Fiber
    this.return = null
    this.child = null
    this.sibling = null
    this.index = 0
    this.ref = null
    this, refCleanup = null
    this.pendingProps = pendingProps
    this.memoizedProps = null
    this.updateQueue = null
    this.memoizedState = null
    this.dependencies = null
    this.mode = mode
    // Effects
    this.flags = NoFlags
    this.subtreeFlags = NoFlags
    this.deletions = null
    this.lanes = NoLanes
    this.childLanes = NoLanes
    this.alternate = null
    // 이하 프로파일러, _DEV__ 코드는 생략
}

var createFiber = function (tag, pendingProps, key, mode) {
    return new FiberNode(tag, pendingProps, key, mode)
}
// 생략...
function createFiberFromElement(element, mode, lanes) {
    var owner = null
    {
        owner = element._owner
    }

    var type = element.type
    var key = element.key
    var pendingProps = element.props
    var fiber = createFiberFromTypeAndProps(
    type,
    key,
    pendingProps,
    owner,
    mode,
    lanes,
    )
        {
            fiber._debugSource = element._source
            fiber._debugOwner = element._owner
        }
        return fiber
    }
리액트 파이버 트리
파이버의 작업 순서

2.2.4 파이버와 가상 DOM

2.2.5 정리

2.3 클래스형 컴포넌트와 함수형 컴포넌트

2.3.1 클래스형 컴포넌트

클래스형 컴포넌트의 한계

2.3.3 함수형컴포넌트 vs. 클래스형 컴포넌트

생명주기 메서드의 부재
함수형 컴포넌트와 렌더링된 값
import React from 'react'
interface Props {
    user: string
}
// 함수형 컴포넌트로 구현한 setTimeout 예제
export function FunctionalComponent(props: Props) {
    const showMessage =()=>{
        alert('Hello' + props.user)
    }
    const handleClick =()=>{
        setTimeout(showMessage, 3000)
    }

    return <button onClick={handleClick}>Follow</button>
}
// 클래스형 컴포넌트로 구현한 setTimeout 예제
export class ClassComponent extends React.Component<Props, {}> {
    private showMessage =()=>{
        alert('Hello' + this.props.user)
    }
    private handleClick =()=>{
        setTimeout(this.showMessage, 3000)
    }
    public render() {
        return <button onClick={this.handleClick}>Follow</button>
    }
}

2.4 렌더링은 어떻게 일어나는가?

2.4.1 리액트의 렌더링이란?

2.4.2 리액트의 렌더링이 일어나는 이유

2.4.3 리액트의렌더링프로세스

function Hello() {
    return (
        <TestComponent a={35} b="yceffort">
            안녕하세요
        </TestComponent>
    )
}

function Hello() {
    return React.createElement(
        Testcomponent,
        { a: 35, b: 'yceffort' },
        '안녕하세요',
    )
}

{type: Testcomponent, props: {a: 35, b: "yceffort", children: "안녕하세요"}}

2.4.4 렌더와 커밋

2.4.6 정리

2.5 컴포넌트와 함수의 무거운 연산을 기억해 두는 메모이제이션

2.5.1 주장 1: 섣부른 최적화는 독이다, 꼭 필요한 곳에만 메모이제이션을 추가하자

2.5.2 주장 2： 렌더링 과정의 비용은 비싸다, 모조리 메모이제이션해 버리자

2.5.3 결론 및정리

끝!