반응형
1. 렌더링?
리액트 컴포넌트가 가지고 있는 props , state 등의 상태를 어떻게 UI 를 구성할 지, 컴포넌트에게 작업을 요청하는 행위
리액트가 렌더링 되는 부분은 public/index.html 파일과 src/index.tsx 파일을 살펴보면 알 수 있는데, 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 생략 -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- id root 인 부분 -->
</body>
</html>const container = document.getElementById('root')!
const root = createRoot(container)
root.render(<App />)createRoot 를 통해 DOM 엘리먼트를 전달 후에, App 이라는 이름을 가진 리액트 엘리먼트를 root.render() 하는 방식이다.
2. 리렌더링은 언제 일어나는가?
리렌더링이란, 앞서 발생한 렌더링이 다시 렌더링이 되는 현상을 뜻하는데 다음과 같을 경우 리렌더링이 일어난다.
- 컴포넌트의 키 값이 바뀌었을 경우
- 자신 컴포넌트가 가지고 있는 state 가 변했을 경우
- 부모에게 전달 받은 props 가 변했을 경우
- 중앙 집중 라이브러리 상태 값이 변했을 경우
- 부모가 리렌더링 되는 경우
이렇게 리렌더링이 일어나므로, 렌더링 되는 과정내에서 전체 HTML 을 업데이트 하는 것이 아닌, 부분적 엘리먼트만 바꿀 수 있게 됩니다.
react forceUpdate 등 강제로 렌더링 해주는 함수가 존재하긴 하나, 강제로 업데이트는 사용을 지양하므로, 있다는 정도만 알고 있으면 좋을 것 같다.
반응형