프론트엔드/React

리액트 주요 콘셉트

bread-gee 2023. 12. 13. 19:49

 페이스북에서 개발한 자바스크립트 라이브러리로,

사용자 인터페이스를 구축하기 위한 선언적이고 효율적인 방법을 제공한다.


리액트는 컴포넌트 기반 아키텍처를 기반으로 하며,

UI를 독립적인 작은 조각으로 분할하여 관리한다.

 

이러한 컴포넌트는 재사용 가능하며 

각각의 독립성을 가지며 상태(State) 및 속성(Properties)을 통해 데이터를 관리한다.

 

  1. 컴포넌트(Component)
    리액트 애플리케이션은 작은 조각으로 나누어진 컴포넌트로 이루어진다. 컴포넌트는 UI의 일부를 나타내며 독립적으로 작동하도록 설계되어 재사용성을 높인다.
  2. 가상 돔(Virtual DOM)
    리액트는 가상 돔을 사용하여 실제 돔과 상호작용한다. 가상 돔은 메모리에 존재하는 가벼운 복사본으로서, 변경 사항을 더 효율적으로 감지하고 실제 돔에 최소한의 변경만 적용하여 성능을 향상시킨다.
  3. JSX(JavaScript XML)
    JSX는 자바스크립트의 확장 문법으로, 리액트에서 UI를 작성하는데 사용된다. XML과 유사한 구조를 가지며, 이를 통해 UI의 구조를 더 직관적으로 작성할 수 있다.
  4. 상태(State)
    컴포넌트는 상태를 가질 수 있다. 상태는 컴포넌트의 데이터를 나타내며, 상태가 변경될 때마다 리액트는 자동으로 UI를 업데이트한다.
  5. 속성(Properties)
    속성은 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이다. 속성을 통해 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 수 있다.
  6. 이벤트 처리(Event Handling)
    리액트에서는 사용자의 상호작용에 대한 이벤트를 다루기 위해 이벤트 핸들러를 사용한다. 이를 통해 사용자의 액션에 반응하여 UI를 업데이트할 수 있다.
  7. 라우팅(Routing)
    싱글 페이지 애플리케이션(SPA)을 구축하기 위해 라우팅을 사용할 수 있다. 리액트 라우터를 통해 페이지 간의 전환을 관리하고 URL을 기반으로 컴포넌트를 렌더링할 수 있다.
  8. 상태 관리(State Management)대규모 애플리케이션에서는 상태 관리 라이브러리(: Redux) 사용하여 전역 상태를 효과적으로 관리한다.