📑 [React] React란?

 

 

React는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다. 특히, 복잡한 애플리케이션에서 UI 구성 요소를 효율적으로 관리하고 업데이트하는데 탁월합니다.

---

 

주요 개념

 

 

• 컴포넌트 기반 구조:
  • 컴포넌트 (Component)란? 구성요소 라는 뜻으로, 화면을 구성하는 요소, UI를 구성하는 요소를 말합니다.
    컴포넌트를 자바스크립트 파일로 모듈로 있다는 것은 중복코드를 제거하는 관점에서 매우 큰 장점이다.
  • React 애플리케이션은 여러 개의 독립적이고 재사용 가능한 컴포넌트로 구성됩니다. 각 컴포넌트는 UI의 특정 부분을 담당하며, 이를 조합하여 복잡한 UI를 구성합니다.

이 때 렌더링(Rendering)이란 UI 요소를 화면에 그려내는 것을 말합니다.

 

 

• JSX (JavaScript XML):
  • JSX는 JavaScript에 XML/HTML 문법을 추가한 것으로, React 컴포넌트의 구조를 정의할 때 사용됩니다. JSX를 사용하면 코드가 더 읽기 쉽고 직관적입니다.
    
    

 

• Virtual DOM:
  • React는 실제 DOM 대신 Virtual DOM을 사용하여 UI 업데이트를 효율적으로 처리합니다. Virtual DOM은 메모리 내에서 가상으로 존재하는 DOM 트리로, 상태 변화 시 실제 DOM을 직접 조작하는 대신 Virtual DOM에서 변경을 계산한 후 최소한의 변경만 실제 DOM에 반영합니다. 이를 통해 성능을 최적화합니다.

 

• 단방향 데이터 흐름:
  • React는 단방향 데이터 흐름을 채택합니다. 데이터는 상위 컴포넌트에서 하위 컴포넌트로 흐르며, 하위 컴포넌트는 props를 통해 데이터를 전달받습니다. 이 방식은 데이터의 흐름을 추적하고 디버깅하기 쉽게 만듭니다.

 

 

---

 

 

주요 특징

 

 

 

 

• 선언형 프로그래밍:
  • React는 선언형 방식으로 UI를 설계합니다. 개발자는 UI가 특정 상태에서 어떻게 보여야 하는지를 선언적으로 작성하고, React가 그 상태에 맞게 UI를 업데이트합니다. 즉,  불필요한 과정은 생략하고 내가 이루고자 하는 목적만 간결히 명시하는 방법을 말합니다.
  • 화면 업데이트 구현이 쉽습니다. 사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을  바꿔 상호작용하는 것이 좋다.

 

 

• 재사용 가능한 컴포넌트:
  • 컴포넌트는 독립적이고 재사용 가능하게 설계됩니다. 이를 통해 코드의 재사용성을 높이고 유지보수를 쉽게 할 수 있습니다.

 

• 리액트 훅(Hooks):
  • 훅은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해줍니다. 예를 들어, useState 훅을 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있습니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

 

이 예시는 useState 훅을 사용하여 상태를 관리하고,

버튼 클릭 시 상태를 업데이트하여 화면에 반영하는 간단한 컴포넌트를 보여줍니다.

React는 이와 같은 단순한 UI 구성 요소부터 대규모 애플리케이션까지

다양한 범위에서 활용될 수 있는 강력한 도구입니다.

 

• 커뮤니티와 에코시스템:
  • React는 방대한 커뮤니티와 에코시스템을 가지고 있습니다. 많은 오픈 소스 라이브러리와 도구들이 React와 함께 사용되며, 다양한 문제를 해결하기 위한 솔루션이 제공됩니다.