⛓️ 리액트 렌더링 과정
📍 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를 줄이는 것이다.
Author And Source
이 문제에 관하여(⛓️ 리액트 렌더링 과정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jsolaura/리액트-렌더링-과정저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)