[리액트] 리액트란

[무료] 처음 만난 리액트(React) - 인프런 | 강의

자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫

www.inflearn.com

개인 프로젝트를 A-Z로 진행하기 위한 준비과정으로 리액트 공부를 시작했다. 백엔드 개발자지만 항상 어느 정도 프론트에 대한 지식과 코드를 작성할 수 있어야 한다는 생각을 갖고 있었는데 이번 기회에 리액트란 어떤 것인지 명확하게 인지하고 기본적은 사용법을 익혀보자.

들어가기 전

SPA(Single Page Application)

전통적으로 화면에는 각 html 페이지가 존재했다. 다른 컨텐츠를 보기 위해선 다른 html 페이지로 넘어가야 했다.
하지만 SPA는 하나의 페이지로 요청에 따라 Content만 해당 페이지 body에 넣어주면서 화면을 변경한다.

Copyright Soaple(https://www.inflearn.com/users/364684/@soaple)

JavaScript

정식 명칭은 ECMAScript, 그래서 버전에 따라 ES5, ES6라 부른다.
자바스크립트는 스크립트 언어의 한 종류이다.

스크립트 언어 특징

런타임에 코드가 해석된다.
C, Java는 컴파일 과정에서 소스코드가 해석, 실행가능한 형태로 변환이 된다.
자바스크립트는 런타임에 코드가 해석되고 실행된다.

리액트란

A JavaScript library for building user interface

리액트 공식 홈페이지에는 위와 같이 나와있다. 해석해 보자면 user interface를 building 하기 위한 자바스크립트 라이브러리라는 뜻이다. 리액트는 자바스크립트의 대표적인 UI 라이브러리

library : 프로그래밍 언어에서는 자주 사용되는 기능들을 정리해 모아 놓은 것(모음집)

user interface : 사용자 인터페이스(UI)는 사용자가 프로그램과 상호작용하는 것 ex) 텍스트 입력창, 버튼 등이 모두 UI

대표적인 JavaScript UI 라이브러리 or 프레임워크

AngularJS(현재 공식적인 지원 종료) 프레임워크
ReactJS : 페이스북에서 만든 오픈소스 자바스크립트 UI라이브러리, 현재 가장 많이 사용
Vue.js : 오픈 소스 프로젝트 프레임워크

프레임워크 vs 라이브러리

제어권한이 프레임워크에 있느냐, 개발자에게 있느냐에 따라 달라진다. 프레임워크는 흐름의 제어 권한을 프레임워크가 갖고 있다. 라이브러리는 제어 권한이 개발자한테 있다.

리액트의 장점

빠른 업데이트와 렌더링 속도

업데이트란 웹사이트에서 화면 내용이 바뀌는 것, 빠른 업데이트는 웹사이트에서 중요한 요소이다.
리액트는 빠른 업데이트를 위해 Virtual DOM을 사용한다.
일반 웹사이트는 수시로 화면이 업데이트가 된다.
기존 방식은 DOM을 직접 수정 but 리액트는 업데이트해야 할 최소한의 부분만 찾아서 DOM를 수정하기 때문에 빠른 업데이트가 가능하다.

Virtual DOM

가상의 DOM(Document Object Model)
웹 페이지와 실제 DOM 사이에 중간 매개체

Component-Based

컴포넌트는 구성요소라는 뜻
리액트는 모든 부분이 컴포넌트로 구성되어 있다. (작은 레고 블록들이 모여서 하나의 모형이 만들어진다는 느낌)
컴포넌트를 조립해서 전체 페이지를 만들어 간다.
컴포넌트 기반 구조의 장점은 재사용성이다.
재사용성을 높게 개발한다는 것은 다른 곳에서도 쉽게 사용할 수 있도록 개발한다는 것이다.

재사용성

객체지향 프로그래밍에서 나오는 개념(중요), 계속해서 다시 사용이 가능하다는 의미
리액트는 컴포넌트 기반으로 되어있기 때문에 여러 군데에서 하나의 컴포넌트가 재사용될 수 있다. 그래서 쉽게 재사용될 수 있도록 컴포넌트를 만들어야 한다.

그 외 장점

든든한 지원군 : meta
- meta가 만든 오픈 소스 프로젝트, 꾸준한 버전 업데이트가 이루어지고 있다.
활발한 지식 공유와 커뮤니티
React native : 자바스크립트로 안드로이드와 IOS 앱을 만들 수 있다.

리액트의 단점

방대한 학습량을 갖고 있다. 기존 방식과 다른 UI 라이브러리이기에 배워야 할 것이 많다. (virtual DOM , JSX , Component 등)
높은 상태 관리 복잡도
state는 리액트 컴포넌트의 상태를 의미하고 웹사이트 화면의 바뀐 부분은 state가 바뀐 컴포넌트를 의미한다.
성능 최적화를 위해 state를 잘 관리해야 하며 규모가 커지면 state 관리가 중요 (외부 상태 라이브러리를 사용하기도 함 redux 등)

저작자표시