React의 핵심 개념과 사용 방법을 설명합니다.

React 소개

React는 Facebook에서 시작된 JavaScript 라이브러리로, 사용자 인터페이스를 구축하는 데 사용됩니다. React는 MVC 프레임워크가 아니며, 단순히 V(뷰) 계층에 해당하는 기능만 제공합니다.

JSX 문법과 컴포넌트

React에서는 JSX 문법을 통해 컴포넌트를 생성하며, 이를 통해 함수형 UI 프로그래밍 방식을 지원합니다.

const MyComponent = () => (
  <div className="container">
    <h1>안녕하세요, React!</h1>
  </div>
);

Virtual DOM과 Diff 알고리즘

React는 Virtual DOM을 사용하여 효율적인 렌더링을 수행하고, Diff 알고리즘을 통해 변경된 부분만 업데이트합니다.

// Virtual DOM 예제
const oldTree = <div><p>첫 번째</p></div>;
const newTree = <div><p>두 번째</p></div>;

// Diff 알고리즘 적용 후 렌더링
ReactDOM.render(newTree, document.getElementById('root'));

React 기본 사용법

React를 사용하기 위해 필요한 패키지를 설치하고, 컴포넌트를 생성 및 렌더링하는 방법을 알아봅니다.

npm install react react-dom

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

function App() {
  return <div>Hello, React!</div>;
}

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

JSX 주요 사항

• HTML 클래스 속성을 사용할 때는 className을 사용해야 합니다.
• JS 코드를 직접 JSX 안에 포함시킬 수 있으며, 중괄호({}) 안에 작성합니다.
• JSX 내에서는 표현식만 사용할 수 있으며, 선언문은 사용할 수 없습니다.
• 주석은 {/* 주석 내용 */} 형식으로 작성합니다.

컴포넌트와 데이터 전달

React 컴포넌트는 독립적이고 재사용 가능한 UI 조각으로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다.

function ParentComponent() {
  const name = 'React';
  return <ChildComponent userName={name} />;
}

function ChildComponent(props) {
  return <div>안녕하세요, {props.userName}!</div>;
}

라이프사이클 메소드

React 컴포넌트의 라이프사이클 메소드를 이해하고, 각 단계에서 실행되는 작업을 살펴봅니다.

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('컴포넌트가 마운트되었습니다.');
  }

  render() {
    return <div>내용</div>;
  }
}