개요

React 란?

FaceBook에서 제공해주는 Front End Library

React는 Component 기반으로 되어있어서 Component에 데이터를 내려주면 개발자가 설계한 대로 UI가 만들어져 사용자에게 보여준다.

Library? Framework?
- 라이브러리(Library) 개발자는 필요시 공개된 라이브러리를 자신의 프로그램에 호출하여 사용할 수 있다.
- 사전에 만들어진 코드의 집합
- 프레임워크(Framework)
- 직역하면 뻐대라는 의미를 지니고 있는데, 컴퓨터 분야에서의 프레임워크는 프로그램을 개발할 때 사용할 수 있는 인터페이스 패키지라 할 수 있다. 여기서의 인터페이스란 개발의 근간을 이루는 구조의 필요한 코드, 알고리즘, 암호화 체계, 데이터베이스 연동방식의 집합체를 말한다.
- 라이브러리와 프레임워크의 차이프레임워크는 단순한 호출용 모듈이 아니라, 프로그램의 근간이 되는 구조를 잡는 것으로부터 시작하여, 각종 외부 요소(데이터베이스, 보안, 사용자 인터페이스)와 접하는 영역에 대한 구현 방식을 제안하는 역할까지 하고 있다.
- 라이브러리는 개발자가 어떠한 기능을 가진 모듈이 필요할 때 해당 모듈을 호출하여 가져다 쓰는 개념이라고 할 수 있다.

React를 사용하는 이유?

복잡하고 동적인 웹 애플리케이션에서 UI를 동적으로 나타내기 위해서는 많은 상태를 관리해야 하는 부담이 생긴다.

프로젝트의 규모가 크고 다양한 UI와 상호작용이 필요하다면 DOM요소 하나하나를 직접 관리하고 복잡하게 늘어진 코드를 리팩토링 하는 것은 점점 힘들게 될 것이고 또한 이러한 복잡한 SPA에서는 DOM 조작이 많이 발생하면 매번 브라우저가 연산을 해야 하므로 전체적인 프로세스가 비효율적이 되기 쉽다.

React의 특징

컴포넌트(Component) Javascript와 JSX를 조금 사용할 줄 안다면 간단하게 구현이 가능한데 이 때문에 개발을 쉽게 하고 유지보수를 하는데도 큰 장점이다. 컴포넌트들은 다른 화면에서도 사용될 수 있는 재사용성을 가지고 있기 때문에 똑같은 코드를 반복적으로 입력할 필요가 없어서 효율적이다.
- 클래스형? 함수형?
  - 클래스형 컴포넌트
    - Life Cycle Method를 사용할 수 있다.
    - render 함수가 반드시 존재해야 한다.
    - state의 사용이 가능하다.
    클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 stateful로 불리며 상대적으로 복잡한 UI로직을 가지고 있다.
  - class로 정의하고 render() 함수에서 JSX를 반환한다.
  - 함수형 컴포넌트
    - 상태를 저장할 수 없다. 함수는 한번 실행되고 나면 메모리 상에서 사라진다.
    - 함수형 컴포넌트에서만 사용할 수 있는 hooks는 로직을 state와 분리할 수 있게 해 주기 때문에 로직을 재사용할 수 있게 해 준다.
    - hooks는 클로저 원리를 이용해서 state를 저장한다.
    - 클래스형 컴포넌트에 비해 선언하기가 편하다.
    - 메모리 자원을 클래스형 컴포넌트에 비해서 덜 차지한다.
    - 빌드 후 배포 시에 결과물의 크기가 작다.
    함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려주기 때문에 stateless라고 불린다. 사실상의 크기와 성능면에서 함수형과 클래스형의 차이는 그리 크지 않고, 함수형 컴포넌트에서 지원하지 않는 기능 또한 React의 버전 업데이트 이후 Hooks라는 기능을 통해 가능해 지게 되었다.
  - 따라서 둘의 사용은 사용자의 선택에 의해 결정된다고 보는 것이 크고, 공식 매뉴얼에서는 함수형 컴포넌트 + Hooks를 통해 컴포넌트를 작성하는 것을 권장하지만 클래스형 컴포넌트도 알아 두는 것이 좋다.
  - function으로 정의하고 return문에 JSX를 렌더링 한다.
- 캡슐화 컴포넌트 내부에서 발생하는 업데이트, 테스트 케이스, 재사용에 용이하게 컴포넌트를 설계해야 한다.
- 메인 애플리케이션으로부터 독립되어있는 컴포넌트를 뜻한다.
컴포넌트의 종류는 클래스형(stateful)과 함수형(stateless)으로 나누어진다.
상태를 관리하는 컴포넌트들을 캡슐화해 빌드한 후 그 컴포넌트들을 복잡한 UI로 조합하여 구성이 가능한데, 컴포넌트 로직은 자바스크립트로 구성되어 있어 애플리케이션을 통한 대량 데이터를 전송 가능하게 하고 DOM의 외부 상태를 쉽게 유지할 수도 있다.
컴포넌트 별로 나누어 개발이 가능하다.
단방향 데이터 플로우
React에서는 부모 컴포넌트와 자식 컴포넌트 간에 데이터를 전달할 수 있는데, 데이터를 전달할 때 부모에서 자식에게로만 데이터 전달이 가능하다.
Props and State
- Props 읽기 전용 데이터라고 생각하면 된다. 자식 컴포넌트에서 props를 변경하려면 state를 사용해야 한다. (이때 원 데이터인 props는 변경되지 않는다.)
- 자식 컴포넌트는 부모 컴포넌트로부터 전달받은 props를 절대 변경할 수 없다.
- props란 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터(함수 등)를 말한다.
- State사용자와 상호작용을 통해 데이터를 동적으로 변경해야 할 때 사용한다. 그러나 자신보다 상위에 있는 state는 변경이 가능한데 state를 변경해 주는 함수를 props로 받는다면 state의 변경이 가능하다.
- 주의해야 할 점은 props로 넘겨줄 때에 this의 binding을 신경 써줘야 한다.
- state는 클래스형 컴포넌트에서만 사용할 수 있는데 각각의 state는 독립적이라 다른 컴포넌트의 직접적인 접근은 불가능하다.
- state는 동적인 데이터를 다룰 때 사용한다.
Virtual DOM일반적으로 html 코드를 짜고 웹 브라우저에서 html을 열게 되면, html 코드들이 DOM을 만들게 된다. 이를 통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선된다.
- Real DOM? DOM(Document Object Model)은 웹 페이지에 대한 인터페이스이다. DOM은 문서에 접근할 수 있는 API로 스크립트나 CSS와 같은 언어들이 DOM 구조에 접근하여 커스텀할 수 있게 만들어주는 연결 부분 역할을 갖는다.
- 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다.
- 트리구조를 갖고 있다.
Virtual DOM은 렌더링 되지 않기 때문에 연산 비용이 적다. 모든 변화를 Virtual DOM을 통해 묶고 이를 Real DOM으로 전달한다.
실제 DOM에 적용시키기 전에 가상의 DOM을 만들어 적용시키고, 최종 완성된 결과만 Real DOM으로 전달한다.
Virtual DOM은 가상의 Document Object Model을 말한다.
Javascript 기반
React는 자바스크립트 기반으로 별도의 프레임워크를 배울 필요가 없으며 자바스크립트를 그대로 활용하면 된다. 앵귤러(Angular)또는 뷰(Vue)처럼 다른 언어를 배울 필요가 없기 때문에 자바스크립트와 HTML을 조금 아는 정도로도 개발이 가능하다.
Flux 패턴 Flux패턴의 핵심은 단방향 데이터이고, Action이 발생하면 dispatcher로 Store로 전달되고 Store가 변경되면 view가 변경된다.
Flux패턴이란, MVC 패턴을 보완할 목적으로 faceBook에서 만든 아키텍처이며, Redux를 경험해 본 사람들은 쉽게 이해할 수 있다.

React 장, 단점

장점

Component를 사용해서 효율적으로 재사용이 가능하고 유지보수가 용이
생태계가 넓고, 다양한 라이브러리 사용 가능
다른 프레임워크나 라이브러리 혼용 가능
Virtural DOM을 활용하여 빠른 렌더링 가능
단방향 데이터 바인딩을 통한 디버깅 용이, 다른 라이브러리에 비해 안정성이 높음
리액트 네이티브를 활용하여 앱 개발 가능

단점

프레임워크의 MVC와 비교했을 때 V(View)만을 관리한다.
진입장벽이 낮지 않다.
View 이외의 기능은 써드파티 라이브러리를 이용하거나 직접 구현해야 함.

출처

모든 관련 외부 문서에 대한 링크를 추가합니다.

저작자표시 비영리 변경금지 (새창열림)