React에 대해 아는거 적어보기

리액트는 값 객체를 통해 화면을 특정 이벤트에 반응하여 렌더링하는 프레임워크다.
(라이브러리라 소개하지만 이미 프레임워크 수준이 아닐까싶다.)

우선 값 객체라 소개했는데, 이유는 리액트의 컴포넌트가 실제로는 값 객체이기 때문이다.

npx create-react-app my-app

을 하고, 컴포넌트를 간단히 만들고 console.log(); 를 해보자. 뭐가나올까

import React from 'react'

export const Component = () \=> {
  return (
    <div\>Component</div\>
  )
}

객체다.

그렇다 실제로 React의 컴포넌트는 우리가 순수 JS로 만들 수 있는 진짜 객체다.(나는 놀랐다.)

그렇기에 우리는 리액트 컴포넌트를 JS언어의 하나의 데이터처럼 활용할 수 있었던 것이었다.
변수에 할당하고, props라는 객체로 다른 컴포넌트에 넘겨줄 수 있다. 등등

~ 지금 생각해보니, 엄청 특별한 기능은 아닐지도..? ~

사실 다른 언어는 거의 해본적이 없어 얼마나 다를지 모르겟는데, 요즘 svelte를 배우므로 차이를 깨달으면 다음 블로그에 적어보겠다.

사실 지금 뭘 공부하고 적는게 아니라 뭐라도 쓰면서 블로그를 시작하고 싶어 머릿속에 있던걸 최대한 꺼내보려하는데 잘 안된다. 이걸 게시하면 오히려 안좋을지도.. ㅠ

그 다음은 리액트의 렌더링 순서이다.
리액트는 어떤 트리거에 의해 리렌더링이 일어난다.
당자 기억나는건, props의 변화, setState()의 호출 정도이다.
일단 해당 이벤트들이 일어나면 리렌더링 과정이 시작하는데,

우선 리액트 엔진에 의해 변경이 일어난 컴포넌트를 쭉 찾아간다.
이 과정을 reconcilation이라고하는데, 어떤 컴포넌트가 변경되었는지를 찾는과정이다.
이때 과정이 굉장히 느릴 수 있으므로 (컴포넌트를 트리형태로 존재하며, 굉장히 깊이가 깊을 수 있다.) 리액트 팀은 최대한 단순하게 컴포넌트를 분별할 수 있길 바랬고, 그 결과가

1. 태그가 달라졌는가?
2. 태그의 속성이 달라지거나 추가되었나?
3. key prop이 달라졌는가?
   등등의 이유만 확인하면 해당 컴포넌트부터 그 아래는 확인하도 하지 않고, 모두 렌더링 대상자가 되어버린다.

근데 쓰다보니 궁금한게, 어떤 props에서 변경되었는지를 디스패치하면, 굳이 reconcilation과정이 불필요한거아닌가?
굳이 추가한거라면, 그 정도 정보를 가지고는 정확히 어떤 컴포넌트가 rerendering 대상자인지 확신할 수 없었기 때문인거고.
아니면 그냥 위에서부터 reconcilation하는게 훨씬 더 빠르기 때문일까. 흠 잘 모르겠다! 나중에 찾아서 수정해야겠다.

그렇게 찾는 컴포넌트부터 리렌더링 과정을 시작하게 되는데
우선 얼마나 어떻게 변경되었는지 찾기 위해서, 이전 값과 비교하는 시간을 가진다.
트리는 렌더링 되면서 값 객체 트리를 만들게 되고,
이전 값 객체 트리와, 변경 이벤트가 발생한 이후 값 객체 트리를 비교하면서, 실제 DOM이 업데이트 되어야 할 부분은 어디인지 찾는다.

React에서 제일 많이 말하는 개발자가 이점을 많이 알려주고 싶어했던 것 같다.
가상DOM을 만들어 비교하는게 아니라, JS값 객체를 비교하기에 빠른거고, 그 이후 변경부분만 실제 DOM에 업데이트하기 때문에 React가 그렇게까지 느리지않고 빠르다고.

여기까지가 아마 렌더링의 랜더단계와 커밋단계 였던거 같은데, 나중에 다른 글을보고 추가해야겠다.