[React] 개요

자바스크립트 라이브러리 / 프레임워크

• 자바스크립트 라이브러리와 프레임워크 필요성
  • 웹 애플리케이션에서 유저 인터페이스 동적 처리 시
  • 각 돔 엘리먼트 작업 필요
  • getElementById()로 찾아와서 이벤트 처리하고 코드 처리
  • 프로젝트 규모가 커지고 다양한 인터페이스를 관리하려면
  • 많은 돔 요소를 관리하고 코드 정리하는 것이 힘든 일
  • 사용자 인터페이스에만 집중할 수 있는 라이브러리 또는 프레임워크 필요
  • 생산성과 높은 유지보수성
  • Angular / React / Vue.js

프레임워크

• 뼈대, 기반 구조를 의미, 제어의 역전
• 여러 클래스나 컴포넌트로 구성되어 있고
• 작업하는 방법이 정의되어 있음

라이브러리

• 단순 활용 가능한 도구 집합
• 사용자가 정의한 클래스 또는 함수에서 호출해서 사용

프레임워크와 라이브러리 차이

• 제어권이 누구에게 있느냐
• 라이브러리 : 사용자가 주도적으로 호출해서 사용
• 프레임워크
  • 제어권이 프레임워크에 있어서 정해진 틀 안에서 코드 작성

React 개요

• UI를 쉽게 만들기 위해 페이스북에서 만든 자바스크립트 라이브러리

• 컴포넌트에 집중되어 있는 라이브러리

  • index.html 페이지 1개와 컴포넌트들로 구성

• 앵귤러와 다르게 뷰만 신경쓰고 나머지는 써드파티 라이브러리 필용

• 공식 라이브러리 개념 없음. 여러 가지 솔루션 사용.

컴포넌트 (component)

• 동작 가능한 하나의 부품 개념

컴포넌트 역할

• 애플리케이션의 화면을 구성하는 뷰(view)를 생성하고 관리
• 여러 컴포넌트를 조립하여 하나의 완성된 애플리케이션 생성

React 특징

• 가장 먼저 Virtual DOM (가상 돔)을 성공적으로 사용
• 이후 다른 많은 라이브러리에서 가상 돔 개념을 채택
• Virtual DOM (가상 돔)
  • 페이스북에서 리액트를 만들기 전의 발상
    • 브라우저는 돔 기반이기 때문에 데이터가 변경될 때마다
    • 페이지에서 새로운 뷰를 만들어서 돔을 새로 넣기 때문에 성능적 문제
  • 해결책
    • 변화가 일어날 때마다 실제 돔에 변경된 내용을 넣는 것이 아니라
    • 자바스크립트로 이루어진 가상의 돔에 한 번 렌더링하고
    • 기존의 돔과 비교하여 변경된 것만 업데이트

가상돔 변경 과정

• 모델이 있고 실제 돔에 그림
• 모델에 변화가 발생하면 (빨간색) 가상의 돔에 그림
• 실제 돔과 가상의 돔 비교
• 바뀐 것 찾아내서 바뀐 특정 부분에 패치함

컴포넌트 코드 자동 생성 확장 프로그램 설치

• reactjs code snippet 설치
• 함수형 컴포넌트 : rsc 입력하고 엔터
• 클래스형 컴포넌트 : rcc 입력하고 엔터
• 컴포넌트 코드 자동 생성됨

리액트 문법 : JSX

• 자바스크립트 + XML 확장된 문법

• HTML과 유사하지만 다름

• class 대신 className 사용

• 최상위 태그 사용

• 변수 선언 / 사용 방법

• if 문 사용

• 인라인 스타일링 : 카멜 표기법

  • 프로그래밍에서 파일, 변수, 함수 등 대상의 이름을 띄어쓰기 없이 짓기 위한 네이밍컨벤션
  • ex:) className

• 꼭 닫아야 하는 태그

• 주석

• 사용자 정의 객체 (변수) 사용