[React] What is React ?

in Devlog on React.js, Devlog



React 란?

Facebook에서 만든 UI 컴포넌트 라이브러리

특징

  1. 컴포넌트 기반 아키텍쳐
  2. JSX
  3. Virtual DOM (Document Object Model)
  4. 단방향 데이터 흐름 지향 (Only View, No MVC)
  5. Reusable Components
  6. Hot reloading
  7. Server Side Rendering

1. 컴포넌트 기반 아키텍쳐

컴포넌트는 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위

컴포넌트 기반으로 개발하는 이유?

  1. 현대 웹은 크고 복잡하여 복잡한 문제를 작게 나누어서 해결하기 위해
  2. 컴포넌트 단위로 코드를 작성하면 캡슐화, 확장성, 결합성, 재사용성 같은 이점이 있음.

관심사의 분리

기존 웹 개발방식은 관심사의 분리 보단 마크업, 디자인, 로직을 분리하는 기술의 분리에 가까웠음. React는 기존의 방식이 아닌 컴포넌트 형태로 관심사를 분리하도록 함.

명령형과 선언형

JSX

JSX : JavaScript + XML

자바스크립트 확장문법으로 템플릿엔진이라 불리는 것과 유사한 방식의 표현식이다.

자바스크립트 문법과 HTML태그가 혼용되어 사용되는 방식

JSX를 사용하는 이유

HTML 친화적이라 어렵지 않게 작성할 수 있다. 마크업과 로직을 분리하지 않고 UI 작성이 가능하다. React 컴파일 과정에서 에러를 감지할 수 있다.

별도의 HTML파일을 생성하지 않고 독립적으로 재사용 가능한 모듈을 실행하기 위해 사용함.

  • JSX를 무조건 사용해야 하는 것은 아니지만, React에서 사용하는 것을 권고하고 있음.

* JSX 와 html과의 차이

  1. className vs class
  2. CamelCase
  3. props
  4. Fragment

JSX 컴포넌트들이 한개의 Wrapper로 감싸져야 한다.

return되는 요소는 항상 한개의 컴포넌트로써 리턴이 되어야함.

<></> 태그안에 아무것도 정의하지 않은 요소

여러가지 컴포넌트들을 하나의 Wrapper로 감싸줘서 리턴하는 역할

React에서 컴포넌트를 나누어서 개발을 할때 불필요하게 div를 반드시 감싸고 내부터 태그를 삽입 하다보면

불필요하게 DOM구조가 복잡해 진다고 느껴질때가 있습니다.

Fragment를 통해서 불필요한 div 랜더링을 생략 할 수 있습니다.

const Head = props => <h1>{props.title}</h1>

function App() {
    return (
        <Head title="this is a title" name = "this is a name"/>
    );
}

  • 리액트에서 map을 사용 시 key값은 idx로 사용하면 안됨.

  • 클래스 State function

  • 함수 stateless function

Virtual DOM

JQuery 방식의 문제

DOM에 변화가 생기면 렌더 트리를 재생성하고 이 과정에서 모든 요소들의 스타일이 다시 계산되고, 레이아웃을 만들고 페인팅을 하는 과정이 반복된다. DOM 조작이 많이 발생한다면 브라우저가 변화를 적용하기 위해 많은 연산을 해야 한다.

  1. DOM Tree 생성
  2. Render Tree 생성
  3. Layout
  4. Painting

DOM 조작 방식에 대한 문제 개선

DOM 트리의 변화를 감지하여 실제 변경이 일어난 부분에 대해 오프라인 DOM에 적용하고, 모든 연산이 끝나면 최종적으로 변경된 부분을 실제 DOM에 한번에 적용하는 것이다.

4. 단방향 데이터 흐름 지향 (Only View, No MVC)

자바스크립트에서 MVC패턴은 대규모 어플리케이션을 구현 핧 시에, 불필요한 양방향 통신이 생기고 무거워지는 문제점이 생겨 이를 해결 하고자 패턴을 바꿈.

데이터를 Controller 없이 Flux Architect를 사용하여 해결함.

이를 구현한 것이 Redux.

** Flux Architecture

5. Reusable Components

React는 UI 렌더링을 위한 UI Library이다.

* Library와 Framework의 차이 Library - 최소한의 기능 제공 Framework - 방대하게 필요한 모든 것들을 올인원으로 제공하는 것

최소한의 Core렌더만 만들어 놓고 사용자층에서 굉장히 많은 재사용가능한 생산할 수있도록 코어모듈을 설계한 것이 리액트 원칙이다.

Library로써의 장점

  1. 매우 빠르다.(퍼포먼스가 좋다.)

  2. React는 UI Library이기 때문에 데이터 바인딩은 원하는대로 선택할 수 있다. 백본.js, 리덕스, Mobx 등

6. Hot reloading

코드를 수정하는 즉시 페이지를 새로고침할 필요 없이 자동으로 리로드 되어 결과를 확인 할 수 있다.

Server Side Rendering (SSR)

단일 어플리케이션의 문제인 SEO문제를 해결 할 수 있다.

  • 서버사이드 렌더링의 장점
    1. 모바일과 같은 디바이스 성능이 안좋은 경우 버벅이는 문제를 근본적으로 해결 해 줄 수 있음.

렌더링은 일반적으로 클라이언트 단에서 하지만 React는 클라이언트에서 하지 않고 백엔드와 함께 연동을해서 node.js에서 페이지 렌더링을 한다.

참고 문서

https://velog.io/@kyusung/react-summary