17. jQuery와 React, Vue-2

#2  React 라이브러리

React 라이브러리는 Facebook에서 개발하고 유지보수하는 UI 라이브러리로, 컴포넌트 기반으로 UI를 구성할 수 있도록 해줍니다. React는 기본적으로 가상 DOM을 사용하여 UI 업데이트를 효율적으로 처리하며, 컴포넌트의 상태 변화를 감지하여 자동으로 UI를 업데이트하는 등 개발자의 생산성을 높여주는 다양한 기능을 제공합니다. 이번에는 React의 주요 기능들을 알아보겠습니다.

컴포넌트(Component)

React에서는 모든 UI 요소를 컴포넌트로 구성합니다. 컴포넌트는 일종의 독립적인 모듈로, 재사용성이 높은 UI 코드를 작성할 수 있도록 돕습니다. 컴포넌트는 자신만의 상태(state)와 속성(props)을 가지며, 이를 이용해 동적인 UI를 구성할 수 있습니다.

 

컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 구현할 수 있습니다. 함수형 컴포넌트는 순수 함수(pure function)으로 구현되어 상태를 가지지 않으며, 속성을 인자로 받아 UI를 반환합니다. 반면, 클래스형 컴포넌트는 상태를 가지며, 이벤트 핸들러와 같은 메서드를 정의할 수 있습니다.

// 함수형 컴포넌트 예시
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 클래스형 컴포넌트 예시
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

 

JSX

React에서는 JSX라는 문법을 사용해 컴포넌트의 UI를 작성합니다. JSX는 자바스크립트의 확장 문법으로, XML과 유사한 구조를 가지며, 컴파일 과정에서 일반 자바스크립트 코드로 변환됩니다. JSX를 사용하면 가독성이 좋은 코드를 작성할 수 있으며, UI와 로직을 보다 쉽게 분리할 수 있습니다.

function Button(props) {
  const handleClick = () => {
    props.onClick();
  };
  
  return <button onClick={handleClick}>{props.label}</button>;
}

상태 관리(State Management)

React에서 상태(State)란 컴포넌트 내부에서 유지되는 데이터를 의미합니다. 이 상태를 바탕으로 컴포넌트의 뷰(View)가 업데이트 됩니다. 만약 데이터가 변경되면, React는 컴포넌트의 뷰를 자동으로 업데이트해 줍니다. 이렇게 상태를 관리하는 것을 상태 관리(State Management)라고 합니다.

React에서 상태 관리를 하는 방법은 크게 두 가지입니다.

• Props와 State를 사용한 상태 관리
• 상태 관리 라이브러리(리덕스, MobX 등) 사용

Props와 State를 사용한 상태 관리

 

React에서 Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 의미합니다. Props는 읽기 전용이므로 자식 컴포넌트에서 Props를 변경할 수 없습니다.

State는 컴포넌트 내부에서 관리되는 데이터를 의미합니다. State는 컴포넌트 내에서 변경될 수 있으므로 컴포넌트에서 자체적으로 상태를 관리할 수 있습니다.

이 두 가지를 조합하여 상태를 관리할 수 있습니다. 부모 컴포넌트에서 Props를 이용해 자식 컴포넌트에 데이터를 전달하고, 자식 컴포넌트에서 이 데이터를 State에 저장하면 됩니다.

import React, { useState } from 'react';

function Counter(props) {
  const [count, setCount] = useState(props.initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <Counter initialCount={0} />
    </div>
  );
}

위 코드에서 Counter 컴포넌트에서 count라는 State를 만들어 초기값을 props에서 받아오고, 버튼 클릭시 setCount 함수를 통해 값을 업데이트 하고, 이 값을 표시하는 컴포넌트입니다.

 

상태 관리 라이브러리(리덕스, MobX 등) 사용

 

상태 관리 라이브러리를 사용하면, 애플리케이션의 상태를 중앙에서 관리할 수 있습니다. 이를 통해 컴포넌트 간에 데이터를 쉽게 전달하고, 상태 업데이트 로직을 쉽게 관리할 수 있습니다.

 

React.js 에 대한 더 자세한 내용은 다른 카테고리에서 다시 다루겠습니다.