간단한 실험을 통해 알아보는 React의 원리

React는 사용자 인터페이스를 구축하기 위한 선언적, 효율적, 유연한 JavaScript 라이브러리입니다. 이 글에서는 React의 기본 원리를 실험과 비교를 통해 단계별로 살펴보겠습니다. 우리의 목표는 React가 어떻게 동작하는지, 그리고 왜 그렇게 설계되었는지를 이해하는 것입니다.

1단계: DOM과 Virtual DOM

실습 1: 순수 JavaScript로 DOM 조작하기

먼저, 순수 JavaScript를 사용하여 웹 페이지에 요소를 추가하고, 수정하고, 삭제하는 방법을 살펴보겠습니다. 이 과정에서 DOM(Document Object Model)의 동작 방식을 이해할 수 있습니다.

<div id="root"></div>
<script>
  const root = document.getElementById('root');

  // 요소 추가
  const element = document.createElement('div');
  element.textContent = '안녕하세요, JavaScript입니다!';
  root.appendChild(element);

  // 요소 수정
  element.textContent = '내용을 변경했습니다.';

  // 요소 삭제
  root.removeChild(element);
</script>

실습 2: React와 Virtual DOM 사용하기

이제 React를 사용하여 동일한 작업을 수행해 보겠습니다. React는 Virtual DOM을 사용하여 효율적으로 UI를 업데이트합니다.

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <div>안녕하세요, React입니다!</div>;
}

ReactDOM.render(<App />, document.getElementById('root'));

비교

• 직접 DOM 조작: DOM을 직접 조작하면 성능 문제가 발생할 수 있습니다. DOM 조작은 비용이 많이 드는 작업이기 때문입니다.
• Virtual DOM: React는 Virtual DOM을 사용하여 실제 DOM에 대한 최소한의 변경만을 수행합니다. 이는 앱의 성능을 크게 향상시킵니다.

2단계: Components

실습 3: Component 만들기

React의 핵심 원리 중 하나는 컴포넌트 기반 개발입니다. 컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 부분으로 나눌 수 있습니다.

function Greeting() {
  return <h1>안녕하세요, React 컴포넌트입니다!</h1>;
}

function App() {
  return <Greeting />;
}

ReactDOM.render(<App />, document.getElementById('root'));

비교

• 순수 JavaScript: UI를 구성하기 위해 모든 요소를 직접 생성하고 조작해야 합니다.
• React 컴포넌트: UI를 재사용 가능한 컴포넌트로 구성하여, 코드의 가독성과 유지 보수성을 향상시킵니다.

3단계: State와 Props

실습 4: State와 Props 사용하기

React 컴포넌트는 state와 props를 통해 데이터를 관리하고 상호작용합니다. state는 컴포넌트의 상태를 관리하는 반면, props는 컴포넌트에 데이터를 전달하는 방법입니다.

function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

class App extends React.Component {
  state = {
    name: 'React'
  };

  render() {
    return <Greeting name={this.state.name} />;
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

비교

• State: 컴포넌트의 상태를 내부적으로 관리

하며, 상태가 변경될 때마다 컴포넌트가 리렌더링됩니다.

• Props: 부모 컴포넌트로부터 데이터를 받아 자식 컴포넌트에 전달합니다. Props는 읽기 전용이며, 컴포넌트의 재사용성을 높입니다.

결론

React는 Virtual DOM, 컴포넌트 기반 개발, 그리고 state와 props를 통한 데이터 관리와 같은 원리를 사용하여, 선언적이고 효율적이며 유연한 사용자 인터페이스를 구축할 수 있게 해줍니다. 이러한 원리들을 이해하고 활용하면, 대규모 애플리케이션 개발에서도 유지 보수성과 성능을 크게 향상시킬 수 있습니다.

관련 글 주제 추천

• React Hooks 사용하기
• React에서의 상태 관리 패턴
• React와 TypeScript 함께 사용하기