React State와 Virtual DOM

😤 State란?

React에서 함수형 컴포넌트에서 상태(state)를 관리하기 위해 제공되는 Hook입니다. 상태란 시간이 지남에 따라 변경될 수 있는 값으로 이 값을 저장하고 관리하는데 useState를 사용합니다. 밑에 코드처럼 현재 상태값 state와 상태 업데이트 함수 setState를 두가지 요소를 배열 형태로 리턴해준다.

• state : 현재 상태 값을 저장하는 변수입니다.
• setState : 상태를 변경하기 위한 함수입니다. 이 함수를 호출하면 React는 상태를 업데이트하고, 해당 상태를 사용하는 컴포넌트를 자동으로 다시 렌더링합니다.

const [state, setState] = useState(초기값);
const [text, setText] = useState(""); // 빈 문자열로 초기화
const [count, setCount] = useState(0); // 숫자 0으로 초기화
const [items, setItems] = useState([]); // 빈 배열로 초기화

💩랜더링이란?

React에서 렌더링이란, 컴포넌트의 함수가 실행되어 JSX를 반환하는 과정을 말합니다. 렌더링이 진행된다고 해서 항상 실제 DOM이 업데이트되는 것은 아닙니다. React는 가상 돔 Virtual DOM을 통해 변경 사항만 효율적으로 반영합니다.

🤯가상 돔 (Virtual DOM)?

가상 돔 Virtual DOM은 실제 DOM을 메모리에 복사해준 것으로 생각하면 된다. 랜더링 이전에 화면의 내용을 담고있는 첫번째 가상돔과 업데이트 이후에 발생할 두번째 가상돔을 비교해서 어떤 Element가 변했는지 비교합니다. 이를 Diffing이라고 부릅니다. 이를 통해 바뀐 부분만을 실제 DOM(브라우저)에 적용하게 됩니다. 이 과정을 재조정 reconciliation이라고 부릅니다. 변경된 부분만 업데이트하므로 DOM 조작의 비용을 줄이고 성능을 크게 향상시킵니다.

⭐가상 돔 반영 절차

1. 상태값이 변경되면 전체 UI를 가상 돔에 리랜더링 한 후
2. 가상 돔 과 변화된 가상 돔을 비교한다.
3. 바뀐 부분만 실제 돔에 적용

👀State 핵심

코드는 버튼 클릭 이벤트에 따라 숫자를 증가하거나 감소시키는 기능을 제공합니다. React의 useState를 사용하여 상태(count)를 관리하며, 상태가 변경될 때마다 컴포넌트가 다시 렌더링됩니다.

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0); 
  console.log("렌더링됨!");
  return (
    <div>
      <button onClick={() => {setCount(count + 1);}}>증가</button>
      <h1>{count}</h1>
      <button onClick={() => {setCount(count - 1);}}>감소</button>
    </div>
  );
}
export default App;

위 코드에세  작성한 것을 보면 useState를 사용하기 위해서 React로 부터 useState를 import하여야 합니다.

import React, { useState } from 'react';

useState를 사용하여 초기 상태 값이 0인 count라는 상태 변수를 생성합니다. 

  const [count, setCount] = useState(0);

버튼 태그를 누를때마다 setCount 함수가 호출되며 count 값을 업데이트 합니다. 즉 count는 상태값을 보여주는 역할 setCount는 상태값을 변경하는데 사용하는 함수입니다. 클릭 이벤트를 통해 상태를 변경하며, 리랜더링이 되고 변경된 상태는 화면에 즉시 반영됩니다. 이때 <h1></h1> 태그의 내용만 업데이트합니다. 나머지 DOM은 변경되지 않습니다.

  return (
    <div>
      <button onClick={() => {setCount(count + 1);}}>증가</button>
      <h1>{count}</h1>
      <button onClick={() => {setCount(count - 1);}}>감소</button>
    </div>
  );

🎅 내 생각

React의 useState와 같은 Hook은 컴포넌트 상태를 선언적으로 관리할 수 있게 해주며 Virtual DOM을 통해 변경된 부분만 업데이트하므로 성능 적으로 DOM조작 비용이 줄었고 화면 다시 그리기 같은 작업을 최소화 하며 즉각 적인 UI 업데이트가 가능하며 개발자가 직접 DOM을 조작 처리 할 필요 없이 알아서 관리하는 장점이 있는거 같다.

---