출처: Udemy 강의, React 공식 문서

1-1. React

• is a “JS library for building a highly interactive User Interface”
  • 근본은 JS 라이브러리다.
  • 써있다시피 사용 이유는 상호작용이 많은 UI를 쉽게 개발하기 위함이다. 즉 개발자의 편의성을 위해서 사용한다고 볼 수 있다.

    • 그럼 리액트를 쓰면 뭐가 그렇게 편한데? 라는 질문이 따라온다. 여기에는 크게 두가지 요소가 있다고 생각한다.

      • State 변화에 따른 자동 렌더링
      • Component와 JSX 문법

      ⇒ 각각의 요소를 살펴보자.

1-2. Why React - Render and Commit

Render and Commit – React

주로 React 공식 문서를 정리한 내용이다.

1-2-1. Component와 React가 화면을 그리기 위해 거치는 세 단계

• 컴포넌트들이 주방의 각 요리사들이고, React가 웨이터, 손님이 유저라고 할때, 다음 세가지 과정을 거쳐서 최종 화면이 그려지게 된다.

1. Triggering a render
2. Rendering the component
3. Committing to the DOM

… + 그리고 브라우저 렌더링(페인팅)

Step 1. Trigger a render

• 렌더링에 대한 트리거는 두가지에 의해 일어난다.

  • 첫번째는 컴포넌트의 최초 렌더시.
  • 두번째는 컴포넌트의(혹은 조상 컴포넌트의) state에 변화가 있을때.

• 최초 렌더의 경우 createRoot 을 호출함으로써 일어나고(CRA등을 쓰는 경우 이부분은 미리 작성되어 있다), 상태 변화는 useState의 setter function이 실행되었을때 일어난다.

  import Image from './Image.js';
  import { createRoot } from 'react-dom/client';
  
  const root = createRoot(document.getElementById('root'))
  root.render(<Image />);
  

Step 2. React Renders your Components

• After you trigger a render, React calls your components to figure out what to display on screen.
• “렌더링”은 리액트가 컴포넌트를 호출하는 것을 말한다. ⇒ 최초와 이후, 두가지 트리거 상황에 따라 렌더 역시 두가지 상황으로 나뉜다.
  1. 최초 렌더 시에 리액트는 root component를 호출한다.
  2. 이후의 렌더 시에 리액트는 트리거를 발생시킨 그 업데이트된 state를 가지고 있는 컴포넌트를 호출한다.
• 렌더링은 그리고 recursive하게 일어난다. 부모가 render되면 자식도 더이상의 자식이 없을때까지 전부 새로 렌더된다는 것.
  • 이렇게 무조건적인 렌더링을 방지하여 성능 최적화를 하기 위해 React.memo 또는 useCallback을 사용할 수도 있다. 참고: 188. Preventing Unnecessary Re-Evaluations with React.memo()
    • React.memo, useCallback, useMemo: https://www.youtube.com/watch?v=3JcEx924AAM