[React] 리엑트란?

 

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

출처 : 위키백과

 

React는 Meta(구 Facebook) 에서 제공하는 프론트엔드 오픈소스 자바스크립트 라이브러리입니다. 

웹뿐만 아니라 모바일 환경에서도 활용할 수 있습니다.

 

• React 기본

SPA를 기본으로 하며, Virtual DOM을 사용해 DOM 요소의 변경 사항을 효율적으로 감지하여 필요한 부분만 업데이트합니다. 이를 통해 리렌더링이 빈번한 동적인 모던 웹에서도 매우 빠른 성능을 제공합니다.

 

-- SPA(Single Page Application): 초기 로드 이후 페이지 새로고침 없이 동작하며, 이동 시 필요한 데이터만 로드하여 빠르고 매끄러운 사용자 경험을 제공합니다.

-- Virtual DOM : 실제 DOM의 가벼운 사본으로, 변경 사항을 비교한 뒤 실제 DOM에 최소한의 작업만 적용하여 효율성을 극대화합니다. 즉, 동적인 웹 환경에 최적화 된 방법입니다. 

+ DOM(Document Object Model) : DOM 은 웹 페이지의 구조를 객체 모델로 표현하여 프로그래밍 언어(주로 자바스크립트)로 쉽게 조작하고 상호작용할 수 있게 해주는 시스템입니다. 웹 페이지를 트리 구조로 표현합니다. 브라우저와 자바스크립트 간의 인터페이스 역할입니다.

 

DOM example

<p id="demo">Hello, DOM!</p>
<button onclick="changeText()">Click me</button>

<script>
  function changeText() {
    document.getElementById("demo").innerText = "Hello, World!";
  }
</script>

결과 : 버튼 클릭 시 p 태그의 텍스트가 변경됩니다. (Click me -> Hellow, World!)

• Components

React는 Component 기반 구조로, 코드 파악이 쉽고 재사용성이 높습니다.
반복 입력 없이 필요한 곳에 Import하여 간편하게 사용할 수 있으며, 유지보수도 효율적입니다.

• JSX

React의 기본적인 확장자명은 JSX를 사용합니다. 

JavaScript XML의 준말로 자바스크립트 안에 HTML 구조를 작성할 수 있게 도와줍니다.

JSX example 

const element = <h1>Hello, JSX!</h1>;

 

• 기본 설치 과정

1. Node.js 설치

Node.js 공식 웹사이트 : https://nodejs.org/ko

Node.js — 어디서든 JavaScript를 실행하세요

위 링크를 통해 Node.js를 설치후

node -v
npm -v

해당 명령어로 설치 확인

 

2. React 프로젝트 생성

npx create-react-app 프로젝트명

 

3. 프로젝트 디렉토리로 이동

cd my-app

 

4. 필수 라이브러리 설치

npm install react@latest react-dom@latest

npm install react-scripts@latest

npm install web-vitals

@ lastest를 사용해  최신버전으로 설치

 

5. 개발 서버 실행

npm start

 

6. 기본 구조 확인

my-app/
├── node_modules/       # 패키지 종속성
├── public/             # 정적 파일
├── src/                # 주요 소스 코드
│   ├── App.js          # 메인 컴포넌트
│   ├── index.js        # 엔트리 포인트
├── package.json        # 프로젝트 설정 파일

 

7. 실행 화면 확인