평소에 부족했던 리액트 관련 개념과 모벡스에 대한 개념을 정리합니다. (+브라우저 관련 내용 추가)

React

Handle DOM in React (ref)

➡️ 리액트에서 DOM을 직접적으로 제어해야 될 경우가 생긴다.

• Animation 제어를 해야할 때
• DOM API를 호출 해야할 때(focus, text, media)
• 외부 DOM Library 사용할 때

리액트에서 컴포넌트 제어는 실제 함수를 호출하는 것보다 값을 이용해서 제어한다.

➡️ 리액트에서는 ref 를 사용 할 때 useRef 라는 Hook 함수를 사용한다.

forwardRef

• 사용하게 되면 코드가 복잡하게 된다. 그래서 되도록 사용하지 않는 것이 좋다.

Portal

• react-dom 에서 제공을 한다.

ReactDOM.createPortal(child: React.ReactNode, container: HTMLElement)

➡️ 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식이다.

➡️ 두 번째 인자(container)는 DOM 엘리먼트이다.

• react root DOM node 외부에 React Element 그리기 => modall에서 쓰기 좋다.

• Portal Component 에서 발생한 event도 부모에 전달이 된다.

ex)

const MyPortal = ({ children }) => {
  const el = document.getElementById('my-portal');
  return ReactDOM.createPortal(children, el);
}

Custom Hook

➡️ Custom Hook을 만들면 컴포논트 로직을 재사용 가능한 함수로 뽑아낼 수 있다.

const useInput = () => {
  const [value, setValue] = useState('')
  const Input = () => (
    <input
      type="text"
      value={value}
      onChange={e => setValue(e.target.value}
    />
  )

  return [value, Input]
}

const App = () => {
  const [title, TitleInput] = useInput()
  const [name, NameInput] = useInput()

  return (
    <div>
      <TitleInput />
      <NameInput />
      <button
        onClick={() => {
          console.log(title)
          console.log(name)
        }
      />
    </div>
  )
}

MobX

MobX 기본 개념

1. Observable

➡️ MobX에서 state(상태, 값)를 관찰 대상(observable value)라고 한다.

이 객체에 변화가 일어나면 바로 탐지해낼 수 있다.

2. Computed Value

➡️ Computed Value(연산된 값)은 기존의 상태값과 다릉 연산된 값에 기반하여 만들어질 수 있는 값이다.

연산에 기반되는 값이 바꿜때만 새로 연산을 하게 한다.

3. Reaction

➡️ Reactions는 특정 값이 바뀜에 따라 해야할 일을 정하는 것이다.

[포맷]

reaction(() => value, (value, previousValue, reaction) => { sideEffect }, options?)

[예시]

4. Actions

➡️ 액션은 상태에 변화를 일으키는 것을 의미합니다. Obserable State에 변화를 일으키는 코드를 호출한다면 액션이라고 할 수 있다.

💡useObserver를 사용해서 리턴하는 값의 업데이트를 계속 반영합니다.

브라우저 렌더링 과정

• HTML Parsing : HTML 문서를 Parsing 하여 DOM Tree를 만드는 과정

DOM : Document Object Model

• Java Script Engine : 자바 스크립트를 처리해서 실행하는 엔진.

• Recalculate Sytle : Parsing 된 css 결과(cssom)를 render tree에 적용하는 과정

CSSOM : CSS Object Model

=> 상속 개념을 구현하기 위해 트리 구조.

• Render Tree : Recalculate Style 결과, DOM Tree + CSSOM Tree

화면에 보이는 요소들을 중심으로 구성 (안보이면 만들지 않는다.)

body가 root이다.

• Layout : Render Tree 노드들의 좌표를 계산하는 과정.

• Paint : 좌표 계산이 끝나고 실제 브라우저 창에 그리는 과정

=> 한 픽셀 씩 그리게 된다. (프린트랑 똑같다 따라서 느리다.)

New version of browser`s main flow

➡️ Update Layer Tree 와 Composite 가 추가가 되었다.

1. Update Layer Tree

• 렌더링에 사용될 최종 Layer들을 계산해서 생성하는 과정.

• Layer 로 분리해서 합치는 방식으로 렌더링한다.

• layer 는 빠르지만 메모리를 많이 사용한다.

2. Composite

• 레이어들을 합성하여 한장의 Bitmap으로 만드는 과정

• paint 는 Layer 별로 paint하며, Tiled backing store 기법을 사용함.