[React] React 소개와 기본 구조

React는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 만들기 위해 사용됩니다. React는 컴포넌트 기반 접근 방식과 가상 DOM(Virtual DOM)을 통해 높은 성능과 재사용성을 제공하며, 단방향 데이터 흐름을 따르는 특징을 가지고 있습니다. 아래에서 React의 소개와 기본 구조에 대해 살펴보겠습니다.

---

React란?

React는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로, 동적이고 대규모인 웹 애플리케이션에서도 효율적인 UI 구축을 가능하게 합니다. React의 핵심 개념은 다음과 같습니다.

 

• 가상 DOM (Virtual DOM): React는 가상 DOM을 활용하여 실제 DOM과 동기화합니다. 이를 통해 변화가 있는 부분만 실제로 렌더링하여 불필요한 리렌더링을 최소화하여 성능을 향상시킵니다.
• 컴포넌트 기반 구조: React는 UI를 독립적인 작은 컴포넌트로 분리하여 개발합니다. 이러한 컴포넌트들을 조합하여 웹 페이지의 전체 UI를 구성할 수 있으며, 재사용성과 유지보수가 용이합니다.
• 단방향 데이터 흐름: React는 데이터의 흐름을 단방향으로 유지합니다. 즉, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하며, 하위 컴포넌트에서는 부모 컴포넌트로 직접 데이터를 변경하지 않고, 콜백 함수를 통해 변경 요청을 전달합니다.

---

React 기본 구조

React 애플리케이션의 기본 구조는 일반적으로 다음과 같습니다.

import React from 'react'; // React 라이브러리를 불러옴

// 컴포넌트 정의
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, React!</h1>
      </div>
    );
  }
}

export default App; // 컴포넌트를 내보내기

위의 코드는 React 컴포넌트를 정의하는 기본적인 구조입니다. import React from 'react';로 React 라이브러리를 불러온 후, class App extends React.Component와 같이 컴포넌트를 선언합니다. render() 메서드 내부에 컴포넌트가 렌더링될 UI를 JSX(JavaScript XML) 문법으로 작성합니다.

JSX는 JavaScript의 확장 문법으로, HTML과 유사하게 보이면서 JavaScript의 힘과 함께 사용할 수 있도록 도와줍니다. JSX는 가독성이 좋고 작성하기 쉽기 때문에 React 컴포넌트 개발에서 널리 사용됩니다.

위의 코드에서 export default App;은 정의한 컴포넌트를 다른 파일에서 임포트하여 사용할 수 있도록 내보내는 것을 의미합니다.

---

ReactDOM.render()로 컴포넌트 렌더링

React 컴포넌트를 실제로 렌더링하려면 ReactDOM.render() 메서드를 사용합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // 위에서 정의한 컴포넌트를 임포트

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

위의 코드에서 ReactDOM.render(<App />, document.getElementById('root'));는 <App /> 컴포넌트를 document.getElementById('root')라는 DOM 요소에 렌더링하는 역할을 합니다. 이렇게 렌더링하면 index.html의 <div id="root"></div> 영역에 <App /> 컴포넌트가 보여집니다.

---

React는 강력한 컴포넌트 기반 구조와 가상 DOM을 통한 성능 최적화를 제공하여, 대규모 애플리케이션에서도 효과적인 UI 개발을 가능하게 합니다. JSX 문법을 사용하여 쉽고 간편하게 UI를 구성하며, 단방향 데이터 흐름을 따르는 특징으로 개발자들에게 유지보수와 협업의 편의성을 제공합니다. 이러한 장점들을 활용하여 React를 사용하여 웹 애플리케이션을 개발해보세요!