- 리액트(React)는 웹 프레임워크이다. 자바스크립트(javascript)의 라이브러리 중 하나인데, 사용자 인터페이스(UI)를 만들기 위해 사용한다.
프레임워크? 라이브러리?
프레임워크와 라이브러리의 개념은 매우 닮아있다. 굳이 따지면 여러 기능을 갖는 클래스와 라이브러리가 특정 목적의 결과물을 구현하고자 합쳐진 것이 바로 프레임워크이다.
따라서 프레임워크는 특정 목적 달성을 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조로서, 소프트웨어 개발에서 하나의 뼈대 역할을 한다.
라이브러리는 소프트웨어의 구성요소 중 하나인데, API를 기반으로 대상 플랫폼에서 바로 실행될 수 있게 모듈화된 프로그램 모음이다.
이 둘은 특정 기능만을 수행하기에 프레임워크,라이브러리는 혼자서 독립되어 실행되는 프로그램이 아니다.
- 결론적으로 이야기하면 html, css, javascript로 만드는 웹페이지에서 사용자와 상호작용하기 용이한 동적 UI를 더욱 편리하게 만들기 위해 사용하는 것이 바로 React(리액트)이다.
- React는 Facebook에서 제공하는 프론트엔드 라이브러리인데, 이 말은 즉 facebook이나 instagram처럼 많은 이들이 사용하는 SNS커뮤니티 플랫폼에서 React를 사용하고 있다.
< 좌측은 뱅크샐러드(banksalad.com/) / 우측은 토스(toss.im) >
React의 특징은 크게 5개로 구분할 수 있다.
- Data Flow : 데이터의 흐름이 한방향으로 흐르는 단방향 데이터 흐름이다. 양방향 데이터 흐름은 대규모 애플리케이션에서 데이터의 흐름을 추적하기 어렵고 복잡하다. 이러한 점을 피하여 변화를 쉽게 예측할 수 있도록 단방향 Flow를 선택했다.
- Component 기반 구조 : React에서는 UI를 여러 Component를 쪼개어만든다. 한 페이지 내에 여러 부분을 독립된 컴포넌트로 만들고 이 컴포넌트를 조립하여 화면을 구성한다. 이렇게 만들어진 구성 덕에 전체 코드파악이 용이하다. 그리고 기능, UI단위로 캡슐화된 코드 덕에 재사용이 쉽다. 코드를 반복 입력하는 것이 아닌, Component만 import하여 사용하면 되는 편리함을 갖는다.
- Virtual DOM(Document Object Model) : 데이터를 객체로 간주하여 관리한다. 이벤트가 발생할 때마다 Virtual Dom을 만들고 재구성할 때마다 실제 DOM과 가상 DOM을 비교하고 전후 상태를 비교해 변경이 필요한 최소사항만 실제 DOM에 반영하여 효율성과 속도를 개선한다. 내가 생각하기에 핵심..?
- Props and State : Props라는 읽기전용데이터의 형태로 부모에서 자식 Component로 전달. 전달받은 Props는 자식에서 변경이 불가능하고 Props를 전달한 최상위 부모만 이를 변경할 수 있다.
State는 Component 내부에서 선언하며 내부에서 값 변경이 가능하다. 동적 데이터를 다룰 때 사용한다. 클래스형 Component에서만 사용가능하고 각각의 state는 독립적이다. - JSX : javascript 확장 문법을 사용한다. const element = < h1 > Hello, World </ h1 > 라는 방식으로 쓰인다. 기존 javascript의 방식으로 문서를 작성하여도 된다. 순수 javascript로만 사용하여 개발하는 React-native도 존재한다.
- 그 외에도 데이터 바인딩 기법을 통한 여러정보를 모아서 보거나, 뷰포트 개념 덕에 스크롤링 효과 같은 시각적 부분에서 표현이 자유롭다. SPA(single page application) 방식 덕에 페이지 이동 없이 빠르게 콘텐츠를 제공할 수도 있다.
- Vue.js : 가장 늦게 출시되었는데 인기있다. React처럼 가상DOM을 사용한다. React와의 차이는 Component의 javascript 집중도가 낮다는 점이다. JSX를 권장하는 React와 달리 컴포넌트 구조나 구성요소에서 HTML 마크업 기반 템플릿 문법을 사용한다.(Angular도 비슷) 기존 HTML,CSS만 사용하던 웹 디자이너가 오히려 구성요소와 구조 이해하기가 쉽다. 초심자에 대한 접근성은 뛰어나나 커뮤니티가 주도하는 프레임워크라 코드품질에 있어서 불안할 수 있다. 하지만 공식문서도 번역 잘 되어있음. 양방향 단방향 플로우 모두 제공
- Angular : 가장 오래된 프론트엔드 프레임워크. Typescript를 주력 언어로 사용하고 있다. 개발에 필요한 모듈도 제공한다. 본인만의 특징적인 선언적 코딩 스타일이 있기에 처음 접할 때 어렵기도 하다. 양방향 단방향 플로우 모두 제공