[React.js] 리액트 시작하기: 리액트란, Virtual DOM, JSX

처음 리액트 학습을 시작하는 입장에서 학습한 내용을 간단히 정리했습니다.

React란

React는 페이스북이 만든 Javascript 라이브러리로 UI를 만들기 위해 사용됩니다. 리액트는 다음과 같은 장점을 갖습니다.

- 바닐라 자바스크립트보다 더 속도가 빠른 웹 애플리케이션을 만들 수 있다. (Virtual Dom)

- 재사용 가능한 UI 단위로 코드 블록을 만들어 효율적으로 화면을 구성할 수 있다. (Component)

- 풍부한 생태계를 갖추고 있다. 프론트엔드 프레임워크 3 대장 중 가장 많이 사용되고 있기 때문에 커뮤니티가 활발하다.

MVC, MVW 패턴을 사용하는 프레임워크와 리액트의 차이점

리액트의 가장 큰 특징은 보여지는 화면(View)에 특화된 것입니다. 이 점이 MVC(Model-View-Controller), MVW(Model-View-Whaterver) 등의 다른 프레임워크들과 특히 다른 점입니다. 또한 리액트는 프레임워크가 아닌 라이브러리입니다. 다른 프레임워크에는 기본적으로 내장되어 있는 기능들이 없기 때문에 추가적인 여러 라이브러리들이 필요합니다. 예를 들어 리액트에는 따로 내장된 라우팅 기능이 없기 때문에 '리액트 라우터'를 사용하게 됩니다.

Virtual DOM

리액트는 Virtual DOM이라는 실제 DOM을 사본화한 자바스크립트 객체를 사용합니다. React에서 실제 DOM이 업데이트될 때는 다음과 같은 절차가 발생합니다.

- 어떤 컴포넌트의 상태가 변경되면 모든 Virtual DOM이 업데이트됩니다.

- 새로운 Virtual DOM과 업데이트 이전의 Virtual DOM과 비교하여 차이가 있는 곳을 알아냅니다.

- 변경된 부분만 실제 DOM에 반영합니다.

Virtual DOM을 이용함으로써 직접적으로 DOM을 제어하는 경우보다 브라우저 렌더링 횟수를 최소화합니다. 이를 통하여 빠른 성능을 갖추게 됩니다.

https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html

JSX란

JSX는 JavaScript를 확장한 문법입니다. JSX를 이용하면 기존의 HTML과 JavaScript 따로 작성하던 방식과 달리 하나의 파일에 마크업과 로직을 동시에 작성할 수 있습니다. JSX를 사용해서 React 엘리먼트를 생성합니다. React 엘리먼트는 화면에 어떻게 표시되는지를 기술하는 역할을 합니다.

JSX 문법에서 알아두어야 할 기본 규칙 세 가지

1. 태그는 꼭 닫아준다.

HTML에서는 <input type="text">와 같이 썼지만 JSX에서는 <input type="text"/>처럼 태그를 닫아줘야 합니다.

import React, { Component } from 'react';

class App extends Component {
    render() { 
        return (  
            <input type="text"/>
        );
    }
}
 
export default App;

2. 반드시 하나의 부모 요소로 감싸준다.

컴포넌트에 여러 요소가 있다면 반드시 하나의 부모 요소로 감싸주어야 합니다. 빈 태그와 같은 Fragments(<></>)를 사용하여 감싸줄 수도 있습니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello React</h1>
        <p>It's Working</p>
      </div>
    );
  }
}

export default App;

3. 자바스크립트 사용은 중괄호를 이용한다.

중괄호를 이용해서 자바스크립트 표현식 쓸 수 있습니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'React';
    return <h1>Hello {name}</h1>;
  }
}

export default App;

Component란

컴포넌트는 재사용 가능한 코드 블록으로 UI단위를 구성합니다. 리액트로 작성된 화면은 컴포넌트만으로 구성되어 있습니다. 컴포넌트는 React 엘레먼트를 반환합니다. 리액트 컴포넌트는 함수 형태로 작성할 수도 있고 클래스 형태로 작성할 수도 있습니다.

Props란

프로퍼티는 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 사용하는 읽기 전용 데이터입니다. 즉, 프로퍼티 값은 수정할 수 없습니다. Attribute의 형태로 전달합니다.

State란

State란 컴포넌트 내부에서 값을 저장하거나 변경할 수 있는 객체로 이를 이용하면 컴포넌트의 상태를 관리할 수 있습니다. 주로 버튼을 클릭하거나 값을 입력하는 등의 이벤트와 함께 사용됩니다.

컴포넌트의 Lifecycle이란

모든 컴포넌트는 라이프사이클을 갖습니다. 라이프사이클은 세 단계(Mounting, Updating, Unmounting)로 나누어집니다. 또한 각각의 라이프사이클 단계마다 메서드를 가지고 있습니다. 이 메서드를 이용해서 특정 시점에 원하는 동작을 하도록 만들 수 있습니다.

저작자표시

빠른손김참치