React DOM 대 JavaScript DOM

가장 큰 차이점은 JavaScript DOM (Real DOM)은 브라우저의 웹페이지 라이브 구조적 표현이라는 것입니다. 반면에 React DOM은 인메모리(in-memory) 가상 DOM(Virtual DOM)을 사용하여 Real DOM을 효율적으로 업데이트하는 소프트웨어 라이브러리입니다. 바닐라 자바스크립트(Vanilla JavaScript)는 브라우저의 요소를 직접 조작하는 반면, React는 이러한 과정을 추상화하여 무거운 브라우저 재계산(recalculations)을 최소화합니다.

React DOM 이해하기 (Virtual DOM)

// React 선언적 접근 방식 const [clicked, setClicked] = useState(false); return ( <button onClick={() => setClicked(true)}> {clicked? 'Clicked!': 'Click Me'} </button> );

JavaScript DOM 이해하기 (Real DOM)

// JavaScript 명령형 접근 방식 const button = document.querySelector('#myBtn'); button.textContent = 'Clicked!'; button.style.backgroundColor = 'blue';

React 컴포넌트(Components)

React 컴포넌트는 자체 로직을 처리하고, props를 통해 데이터를 받고, 상태(state)를 관리하며, 변경되는 UI 부분만 효율적으로 업데이트하는 재사용 가능한 UI 단위입니다.

문법(syntax)

function ComponentName() { return ( <JSX /> ); }

React 컴포넌트 유형

React 컴포넌트에는 두 가지 주요 유형이 있습니다:

1. 함수형 컴포넌트(Functional Components)

함수형 컴포넌트는 React 요소를 반환하는 자바스크립트 함수이며, 최신 React 애플리케이션을 구축하는 선호되는 방식입니다.

• React Hooks를 사용하여 상태 및 라이프사이클 로직을 관리할 수 있습니다.
• 더 단순한 문법을 사용하여 재사용 가능한 컴포넌트에 이상적입니다.
• this 키워드 사용을 피하여 더 나은 성능을 제공합니다.

function Greet(props) { return <h1 >Hello, {props.name}!</h1 >; }

2. 클래스 컴포넌트(Class Components)

2. 클래스 컴포넌트(Class Components)

클래스 컴포넌트는 React에서 확장된 ES6 클래스입니다. 상태(state) 및 생명주기 처리(lifecycle handling)를 지원하는 컴포넌트를 구성할 수 있습니다.

이러한 방식으로 컴포넌트 데이터를 state 속성을 사용하여 관리합니다. 또한, componentDidMount나 componentDidUpdate와 같은 생명주기 메서드를 사용할 수 있습니다.

class Greet extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}