리액트의 렌더링이란

 

 

프론트엔드 이야기할 때 '렌더링'이란 단어가 나오면 가장 먼저 떠올리는 건 브라우저야. 간단히 말해서, 브라우저에서의 렌더링이란 HTML과 CSS를 통해 웹페이지에 필요한 UI를 그려내는 과정을 말해. 

 

이 과정은 사용자에게 정보를 보여주는 만큼 중요하고, 어떻게 렌더링을 하느냐에 따라 웹사이트의 성능에도 큰 영향을 줄 수 있지.

그리고 말이 나온 김에, 리액트에서도 렌더링 이야기를 안 할 수 없어. 리액트의 렌더링은, 말하자면, 브라우저가 필요한 DOM 트리를 만드는 과정과 비슷해. 리액트 역시 렌더링을 위한 자기만의 과정이 있어서, 이걸 이해하는 건 리액트를 이해하는 데 정말 중요해. 리액트에서 렌더링은 시간과 리소스를 많이 써서 이루어지는 일인데, 이 비용은 결국 웹 애플리케이션을 방문하는 사용자한테 부담이 되지. 그래서 시간이 길어지고 복잡해질수록 사용자 경험에도 안 좋은 영향을 미칠 수 있어.

그래서 말인데, 리액트 개발자라면 렌더링이 어떻게, 왜, 어떤 순서로 일어나는지 잘 알고 있어야 해. 그리고 가능하면 이 렌더링 과정을 최소화하는 방법을 찾아야 돼. 사용자 경험을 좋게 하면서도, 리소스 사용은 줄일 수 있으니까 말이야. 

 

# 리액트의 렌더링이란?

그러니까, 리액트에서의 렌더링이란 건, 사실 좀 특별한 게 있는 거야. 브라우저에서 사용하는 그 렌더링과는 좀 달라. 리액트에서 렌더링이란, 리액트로 만든 앱 안에 있는 모든 조그만 부품들, 즉 컴포넌트들이, 자기가 가진 정보(우리가 props와 state라 부르는 거)를 바탕으로, 자기 자신이 어떤 모습을 해야 할지, 어떻게 화면에 그려져야 할지를 결정하는 과정을 말해. 

즉, 너의 리액트 앱이 화면에 어떻게 보일 지를 계산하는 일련의 과정이라고 할 수 있어. 이 과정을 거치면, 리액트는 결국 브라우저에 보여줄 최종적인 DOM 결과물을 만들어내게 되지. 그래서 리액트 개발할 때, 이 렌더링 과정을 잘 이해하는 건 정말 중요해. 그래야 앱의 성능을 끌어올리고 사용자 경험도 좋게 만들 수 있거든. 

# 리액트의 렌더링이 일어나는 이유

리액트에서 렌더링이 일어나는 건, 사실 우리가 채팅 앱에서 새 메시지가 올 때마다 화면이 업데이트되는 것처럼, 웹 애플리케이션에서 무언가 변화가 있을 때마다 화면을 최신 상태로 유지하고 싶어서야. 리액트는 이런 변화를 감지하고 반영하기 위해 렌더링 과정을 거치는 건데, 이 과정에서 리액트는 우리가 만든 컴포넌트들의 props와 state를 확인해. 

예를 들어, 우리가 만든 쇼핑몰 앱에서 장바구니에 상품을 추가하거나, 채팅 앱에서 새로운 메시지가 올 때, 혹은 검색 결과가 업데이트될 때마다, 리액트는 이러한 변화를 감지하고, 각 컴포넌트들이 어떻게 보여야 할지 다시 계산해. 그리고 최종적으로 화면에 보여주는 내용을 업데이트하게 되지.

 

리액트에서 화면이 새로고침되는 건 마치 우리가 얘기하다가 새로운 주제로 넘어가는 것처럼, 화면에 보여지는 정보가 업데이트돼야 할 때 일어나. 이런 리렌더링이 발생하는 경우는 크게 몇 가지로 나눌 수 있어.

1. 상태 변화 : 우리가 채팅앱에서 메시지를 보내면 새 메시지가 화면에 나타나잖아? 그게 바로 컴포넌트의 상태가 변했을 때 리렌더링이 일어나는 거야. 사용자가 입력을 하거나 어떤 상호작용을 통해 상태가 바뀌면, 리액트가 그 변화를 감지하고 화면을 새로 고쳐줘.

 

2. 속성(props) 변화 : 우리가 어떤 정보를 친구에게 전달하듯, 부모 컴포넌트로부터 받은 속성이 바뀌면, 그걸 사용하는 자식 컴포넌트도 다시 그린다고 생각하면 돼. 예를 들어, 쇼핑 목록이 업데이트되면 그 목록을 보여주는 컴포넌트가 새로운 목록으로 화면을 갱신해.

 

3. 부모 컴포넌트 리렌더링 : 자식이 있으면 부모가 움직이면 자식도 따라 움직이는 것처럼, 부모 컴포넌트가 새로 그려지면, 그 안의 자식 컴포넌트들도 기본적으로 다시 그려져. 하지만 이런 건 효율적으로 관리할 수 있는 방법들이 있어서, 꼭 필요한 경우에만 자식 컴포넌트를 다시 그리게 할 수 있어.

 

4.  훅(Hooks) 사용 : `useState`나 `useContext` 같은 훅을 사용할 때, 이 훅들이 관리하는 상태가 바뀌면 컴포넌트가 리렌더링 돼. 예를 들어, 숫자를 세는 버튼을 누르면 그 숫자가 관리하는 상태가 바뀌고, 그래서 화면이 갱신되는 거야.

 

---

 

리액트에서 이런 식으로 화면이 새로 그려지는 건 정말 중요해. 그런데 불필요하게 너무 자주 그려진다면, 앱이 느려질 수 있으니까, 언제 이런 리렌더링이 일어나는지 알고 필요한 경우에만 일어나도록 최적화하는 것도 중요해! 

이런 과정을 통해, 우리가 사용하는 웹 애플리케이션은 항상 최신의 정보를 보여줄 수 있게 되고, 사용자 경험도 좋아지는 거야. 리액트의 렌더링 과정이 꽤 중요한 이유 중 하나가 바로 이거야. 변화를 빠르고 효율적으로 화면에 반영하기 위해서지.