[Frontend] 렌더링(Rendering)이란

목차 (OPEN)

• 🖼️ 렌더링이란
• 🧱 비유
• 💡 렌더링 과정
• 🔄 리렌더링이란

 

 

 

 

🖼️ 렌더링이란

프론트엔드를 처음 배우다 보면,

"React는 컴포넌트를 렌더링한다", "화면이 다시 렌더링된다" 같이 렌더링이라는 단어를 자주 듣게 된다.

 

여기에서 말하는 렌더링(Rendering)이란,

코드(HTML,CSS, JS)를 우리가 보는 실제 화면(UI)으로 바꿔 그려주는 과정을 의미한다.

 

 

---

🧱 비유

렌더링을 쉽게 이해하려면, 집 짓기에 비유해볼 수 있다.

 

우리가 코드를 작성하면, 그건 설계도라고 볼 수 있다.

다음으로, 브라우저는 이 설계도를 보고 실제로 화면을 만들어 보여주는 건축가이다.

마지막으로, 건축가가 설계도를 보고 벽돌을 쌓아서 실제 집을 만드는 과정을 바로 렌더링이라고 하는 것이다.

 

 

---

💡 렌더링 과정

프론트엔드에서의 렌더링은 아래와 같은 과정으로 일어난다.

 

1️⃣ 브라우저가 index.html을 읽는다.

2️⃣ 여기에 연결된 CSS, JS 파일을 불러온다.

3️⃣ JS 안에 있는 React 코드가 실행되어 컴포넌트를 만든다.

4️⃣ 이 컴포넌트들을 브라우저의 <div id="root"> 안에 넣어서 화면을 그린다.

5️⃣ 사용자가 보는 화면(UI)이 최종적으로 그려진다.

 

이와 같은 과정을 거쳐서 우리가 만든 UI가 실제 화면에 렌더링되는 것이다.

 

 

---

🔄 리렌더링이란

위에서 살펴 봤듯이 렌더링은 "코드를 화면으로 바꾸는 과정"인데,

이게 한 번 일어나고 끝나는 게 아니라, 애플리케이션 실행 중에 여러 번 반복될 수도 있다.

 

이거를 바로 리렌더링(Re-rendering)이라고 부르는 것이다.

즉, 화면을 다시 그리는 것을 의미한다고 보면 된다.

 

그리고 여기에서 가장 중요한 것은

리렌더링이 화면을 전부 다 다시 그리는 것이 아니라,

변화된 부분만 감지해서 필요한 영역만 다시 그린다는 점이다.

 

 

예를 들어 아래와 같은 코드가 있다고 해보자.

const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>증가</button>

 

이 코드는 다음과 같은 흐름으로 동작한다.

 

 

1️⃣ 상태 초기화

      usertate(0)으로 인해 처음엔 count = 0인 상태로 화면이 렌더링 된다.

      이때 버튼에는 onClick 이벤트가 걸려 있게 된다.

 

2️⃣ 사용자 상호작용

      사용자가 버튼을 클릭하면 setCount(count + 1)이 실행된다.

      즉, 상태 값이 0에서 1로 바뀌게 된다.

 

3️⃣ React가 변화 감지

     React는 내부적으로 상태(State)를 기억하고 있기 때문에

     setCount 같은 setter 함수가 호출되면, React는 컴포넌트 안에 있는 상태가 바뀌었음을 인지하게 된다.

 

4️⃣ 리렌더링 준비

      React는 상태 변화를 감지했다고 해서 곧바로 전체 DOM을 고쳐버리는 것이 아니라

      Virtual DOM이라는 가상 트리를 새로 만들고, 이전 상태의 Virtual DOM과 비교한다.

 

5️⃣ 차이 계산

     count 값이 0에서 1로 달라졌으니 이 숫자를 표시하는 부분만 변경이 필요할텐데,

     React가 어떤 부분만 고치면 되는지를 알아서 계산한다.

 

6️⃣ 화면 업데이트

     이제 실제 브라우저 DOM에서는 숫자 0을 지우고 1을 그려 넣게 된다.

     (물론 이때 나머지 버튼 모양이나 다른 UI는 건드리지 않는다.)