[개발공부 39일차] React - Virtual DOM, props, state

React는 Virtual DOM, props, state 개념을 사용하여 컴포넌트 기반의 UI를 구현합니다.

- Virtual DOM: React는 가상 DOM(Virtual DOM)을 사용하여 빠른 렌더링(UI 업데이트) 성능을 제공합니다. 컴포넌트가 업데이트될 때마다, React는 가상 DOM과 실제 DOM을 비교하여 변경 사항을 찾아내고, 변경된 부분만 업데이트합니다. 이를 통해 불필요한 DOM 조작을 최소화하여 빠른 렌더링 속도를 유지할 수 있습니다.

- props: props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터로, 컴포넌트 내부에서 변경이 불가능합니다. 따라서 props를 전달받은 컴포넌트에서는 해당 props를 읽기만 할 수 있습니다. props를 이용하여 컴포넌트 간에 데이터를 전달하고, 컴포넌트를 재사용 가능하게 만들 수 있습니다.

- state: state는 컴포넌트 내부에서 변경이 가능하며, 변경된 state는 React가 자동으로 다시 렌더링합니다. state를 이용하여 컴포넌트의 동작을 변경하고, 사용자와의 상호작용에 따른 UI 업데이트 등을 처리할 수 있습니다.

// import 는 필수 (보통 자동완성되나 없을 경우 적용해줘야함)
import React, { useState } from 'react';

function Counter(props) {
  // useState를 사용하여 count 값을 관리
  const [count, setCount] = useState(props.initialCount);

  // 버튼 클릭 시 count 값을 1 증가시킵니다.
  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+1</button>
    </div>
  );
}

function App() {
  return (
    <div>
      {/* props를 사용하여 initialCount 값을 전달합니다. */}
      <Counter initialCount={0} />
    </div>
  );
}

`Counter` 컴포넌트는 `initialCount`라는 props를 전달받고 props를 사용하여 state인 `count` 값을 초기화합니다.

 

클릭 이벤트가 발생하면 `handleClick` 함수에서 `setCount` 함수를 호출하여 `count` 값을 1 증가시킵니다.

 

이때, `setCount` 함수가 호출되면 React는 자동으로 컴포넌트를 다시 렌더링합니다.

 

`App` 컴포넌트에서 `initialCount` 값을 0으로 전달하여 `Counter` 컴포넌트를 렌더링합니다. 따라서 초기값으로 0이 출력되며, 버튼을 클릭할 때마다 값이 1씩 증가합니다.