REACT Chapter 01

1-1. React란?

1) React란
사용자 인터페이스를 만들기 위한 Javascript 라이브러리(SPA 라이브러리)
= 웹 개발을 쉽게할 수 있또록 도와주는 Javascript 라이브러리

• '컴포넌트' 라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움

• 프레임워크 : 개발을 위한 기본 틀
• 라이브러리 : 개발에 필요한 도구 또는 그 집합 전체

SPA : Single Page Application
서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링하는 방식

[전통적인 웹 페이지]

• 웹 브라우저에서 A 페이지에 접속하면 서버는 A 페이지에 필요한 리소스를 다운로드하고, B 페이지에 접속하면 B 페이지에 필요한 리소스를 다운로드하는 방식으로, 각 페이지마다 네트워크 요청이 발생하고 코드가 늘어나며, 클라이언트는 HTML, JavaScript, CSS 등 화면에 필요한 데이터를 서버에 요청하고 서버는 이를 클라이언트에 전달하여 페이지를 구성합니다.

[SPA 페이지]

• 서버는 A와 B 리소스를 미리 다운로드한 후, 클라이언트(브라우저)에서 JavaScript를 통해 동적으로 HTML을 생성하여 화면을 구성하고, SPA(Single Page Application)에서는 HTML, CSS, JavaScript 등 모든 정보가 내장되어 있어 새로운 데이터만 불러와 화면을 업데이트하며, A 브라우저에서 B 브라우저로 이동할 때는 B 리소스를 다시 다운로드할 필요가 없습니다.

REACT는 프레임워크가 아닌 라이브러리

• 라이브러리가 프레임워크보다 큰 개념
  ex. 라이브러리 = 망치, 톱, 삽과 같은 도구
     프레임워크 = 자동차, 배와 같이 이미 구조가 만들어진 형태

// ShoppingList는 React 컴포넌트 클래스 또는 React 컴포넌트 타입
class ShoppingList extends React.Component {
  render() {
    return (
      <div 
      className="shopping-list">
      //개별 컴포넌트는 props라는 매개변수를 받아오고 render 함수를 통해 표시할 뷰 계층 구조를 반환
      //render 함수는 화면에서 보고자 하는 내용을 반환. 특히 렌더링할 내용을 경량화한 React 엘리먼트를 반환
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// 사용 예제: <ShoppingList name="Mark" />

1-2. React의 특징

1) 컴포넌트 기반 설계
스스로 상태를 관리하는 캡슐화된 코드 조각

• 의미단위로 컴포넌트 구성
• 재사용성과 유지보수성 증가
• 부모, 자식 관계를 가짐
  

2) Virtual DOM (가상돔)
실제 DOM의 복사본으로 SPA에서의 동적인 변화를 효율적으로 관리하기 위해 사용

DOM : 문서 객체 모델, Document Object Model

• HTML 문서 구조를 객체로 표현한 것
• DOM은 HTML로 구성된 웹 페이지와 스크립트 및 프로그래밍 언어를 연결시켜주는 역할
  

  문서 구조

  • HTML 문서에는 ,

    등 여러 태그가 문서의 구조를 이루고 있다. 이런 여러 HTML 요소의 계층을 반영해서 만든 객체가 DOM

  • HTML 문서를 객체로 표현하면 Javascript와 같은 스크립트 및 프로그래밍 언어가 웹페이지에 접근할 수 있음.