⛓️ 리액트 렌더링 과정

📍 index.js => App.js => 하위 route로 지정된 컴포넌트들

1. render

• index.js

ReactDOM.render(
	<React.StrictMode>
    	<App />
  	</React.StrictMode>,

  	// 최 상위에 #root 라는 element 를 만들건데
	// App.js로 접근할게 라는 뜻이 될 수 있다.
    
  	document.getElementById('root')
);

• App.js

function App() {
	return(
      <div className="App">
      	<Router>
		// 고정된 header
			<Header />
            // 상태값이 변하는 main
            <main className="contentsWrap">
                <Switch>
				// react-router-dom을 이용한 페이지간의 이동
                    <Route path="/todo" component={Todo} />
                    <Route path="/converter" component={Converter} />
                    <Route path="/movie/:id" component={MovieDetail} />
                    <Route path="/" component={Main} />
                </Switch>
              </main>
          </Router>
      </div>
  );
}

export default App;

2. reconciliation

상태변화 === 렌더링 된 엘리먼트 업데이트

• React의 element는 불변객체이므로 생성 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.
  - 때문에 컴포넌트에서 새로운 상태가 반환될 때 마다 변경된 부분을 계산하기 위한 과정을 밟는다.
  

3. commit

결과적으로 React는 DOM update가 필요한지 판단하여 변화가 있을 때에만 업데이트를 한다.

(🔍 추가적으로 나의 이해를 높이기 위한 설명)

HTML 파일 어딘가에 "div" 태그가 있다고 가정해본다면, 그 안에 들어가는 모든 elements를 React DOM에서 관리, 즉 root DOM 노드라고 부른다.
최종적으로 렌더링을 하는 index.js는 필요한 elements를 불러오는 App.js로 접근하게 된다.

1. [ index.js ] ReactDOM.render("root"element, DOM node) 호출
2. [ App.js ] root element부터 시작해서 렌더되다 마주친 element의 type을 검사
(DOM element: 자식들에 대하여 동일한 과정을 재귀적으로 반복한다.)
(Component element: 해당 컴포넌트에게 props를 입력으로 제공하여 엘리먼트 트리를 얻는다.)
3. 위와 같은 과정을 마치면 최종적으로 하나의 element tree🌲를 얻고 실제로 일괄 반영하는 작업을 수행함

re-render 과정

1. Props가 변경되었을 때

🔘 컴포넌트 사용법

2. State가 변경되었을 때

// 비밀번호를 변경한다고 가정했을 때,

// input = 기존에 사용하던 비밀번호
// setInput = 변경할 비밀번호

const [input, setInput] = useState('');

const handleChange = (e) => {
	setInput(e.target.value);
}

<input type="text" onChange={handleChange} />

3. 부모 component가 re-render 되었을 때

re-render를 줄이려면 Props, State, 또는 Context value의 변경을 줄이거나, 부모 컴포넌트의 re-render를 줄이면 된다.

대부분의 최적화는 Props의 변경을 줄이는 1번을 타겟팅
불변객체(immutable.js 등)를 사용하거나, useMemo, useCallback을 사용하는 식이다.
하지만 그것보다 먼저 고려해야 하는 것이 부모 component의 re-render를 줄이는 것이다.