3.2장

3.2 리액트 요소와 가상 돔

 

• 리액트 요소는 UI를 표현하는 수단이다.
• 렌더링 성능을 높이기 위해 가상 돔을 활용한다.
• 기존의 방식은 돔을 변경하면 돔을 다시렌더링 하지만 리액트의 경우 메모리에 가상돔을 생성하여 기존의 돔과 비교한 후 변경된 점만 찾아서 실제 돔에 렌더링 해주는 방식을 사용한다.

 

3.2.1 리액트 요소 이해하기

 

• JSX 코드 createElement 변환 과정 이해하기

const element = <a href="http://google.com">click here</a>;
const element = React.createElement(
    'a',
    { href: 'http://google.com' },
    'click here',
);

 

• JSX 코드가 createElement 코드로 변환되는 과정이다
• 한개 더 예시를 살펴보자

const element = ( 
    <a key="key1" style ={{ width: 100}} href="http://google.com">click here</a>
);
const element = React.createElement(
    type: 'a',
    key : "key1",
    ref: null,
    props: { 
        href: 'http://google.com',
        style: {
            width: 100,
        },
        children : 'click here'
        },
);

 

• key 와 ref를 제외한 값들은 모두 props 로 들어가게 된다.
• type에 "" 문자열이 아닌 컴포넌트가 들어갈 경우 해당 컴포넌트도 createElement 로 변경하는 과정을 거쳐 type 에는 모두 문자열만 오도록 변환해주는 과정을 진행중이다.
• 리액트 요소는 불변 객체이기 때문에 속성값을 변경할 수 없다.

3.2.2 리액트 요소가 돔 요소로 만들어지는 과정

 

• 데이터 변경에 의한 화면 업데이트는 렌더 단계와 커밋 단계를 거치게 된다.
  • 렌더 단계 : 실제 돔에 반영할 변경 사항을 파악하는 단계
    • 가상 돔을 이용하여 이전의 가상돔과 비교하여 달라진 점을 찾아 실제 돔에 적용하여 변경 사항을 최소화
    • 돔을 변경하는 작업이 다른 작업에 비해 오래 걸리기 때문에 필요한 부분만 변경하는 것이 좋다.
  • 커밋 단계 : 파악된 변경 사항을 실제 돔에 반영하는 단계
• 파이버 구조체 변환

그림 출처 : https://velog.io/@jangws/React-Fiber