[REACT_MEMO] 파워노트1

정의에 대해서 잘 알고 배우는 것이 매우 중요.

 

# 리액트?

리액트 공식 웹사이트에서는

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 소개함

 

# 라이브러리?

- 자주 사용되는 기능을 모아 준 것

 

# 사용자 인터페이스

(User Interface, UI)

- 웹을 예로 들면 웹사이트에서 버튼을 누름으로써 반응하고, 웹사이트에서 특정한 페이지를 보여주며 사용자가 반응하는 것을 일이 키는 걸 말함

 

# UI라이브러리

- 화면을 만들기 위한 기능 모음집

 

# 대표적인 UI 라이브러리

[프레임워크] ANGULAR JS 

- 자바스크립트 기반 웹개발 프레임워크

- 구글에서 제작한 오픈소스 프로젝트

- 2010년에 첫 출시,

   2018년 롱텀 서포트 라 불리는 단기간에 버전 업데이트를 하지 않고 안정적인 버전을 장기간 유지하는 LTS모드에 돌입

- 2022년 1월 LTS도 중단하고 사실상 공식적인 지원이 중단됨

 

[라이브러리] REACT JS

- 자바스크립트 라이브러리는 이름뒤에 JS를 붙이는 경우가 많다.

- 메타에서 제작한 오픈소스 UI라이브러리

- 2013년 첫 출시

- 현재 가장 많이 사용하는 자바스크립트 UI

 

[프레임워크] Vue JS

- 다른 프레임워크와 다르게, '에반 유'라는 중국인 개발자를 통해 시작된 오픈소스 프로젝트

- 2014년 첫 출시, 현재는 영향력이 커져 REACT와 동등한 관계임

 

 

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

- 가장 큰 차이점은 프로그램의 흐름의 대한 제어 권한

- 프레임워크는 프로그램의 제어 권한을 개발자가 아닌 프레임워크가 가지고 있음.

- 라이브러리는 흐름의 제어를 하지 않고, 개발자가 필요한 부분만 가져다 사용하는 것.(즉 제어 권한이 개발자에게 있음)

 

 

# 웹개발의 트렌드

트렌드는 언제 변화할지 모른다.

즉 언어를 공부하면서 웹사이트의 작동원리와 흐름을 함께 이해하는 것이 중요하다.

 

# 정리하자면

리액트는 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 모음집

웹사이트를 개발하기 위해서는 html, css, javascript를 모두 잘 다뤄야 함

사이트의 규모가 커지면, 수많은 페이지를 컨트롤하기가 어려우므로,

이를 위해 나온 게 리액트이나.

SPA란 single page application의 약자로 하나의 페이지만 존재하는 웹사이트, 애플리케이션이라고 볼 수 있다.

하나의 html틀을 만들어 놓 고 사용자가 특정페이지를 요청할 때, 그 안에 해당페이지 내용을 넣어 보내주는 것이 SPA이다.

 

 

# 리액트의 장점과 단점

# 대표적인 장점

- 빠른 업데이트 & 렌더링 속도

- 리액트는 빠른 업데이트를 위해 내부적으로 Virtual DOM(가상의 돔)을 사용한다.

   DOM은 document object model의 약자, 웹페이지를 정의하는 객체

   웹페이지와 실제 돔 사이에서 중간 매개체 역할을 진행함.

   즉, 화면이 업데이트 된다 = 돔이 수정된다는 의미로 볼 수 있다.

   기존의 방식대로 화면을 업데이트 하려면, 돔을 직접 수정해야 하는데 이것은 성능의 영향을 크게 미치고, 비용도 많이 든다.

   왜냐하면, 수정할 것을 돔에서 모두 찾아야 하기 때문이다.

   반면에 리액트는 돔을 직접 수정하는 것이 아닌, 업데이트해야 하는 부분을 찾아서 업데이트하기 때문에

   플로우로 보면

   -> 어떤 상태의 대한 변경(State Change)이 일어나면

   -> 버츄얼 돔에서는 업데이트해야 할 부분을 검색(Compute Diff)

   -> 검색된 부분만을 업데이트하고 다시 렌더링 하면서 변경된 내용을 빠르게 사용자에게 보여준다(Re-render) 

   

 

# 리액트의 구조

Component-Based(컴포넌트 구조, 구성요소)

레고 조립하듯, 컴포넌트를 모아 제작

예) Airbnb 리액트로 만들어 놓았 음, 참고할 것

리액트로 만든 홈페이지는 수많은 컴포넌트의 조합으로 만든것을 확인 할 수 있다.

 

 

# 재사용성(Reusability)___중요

재사용성은 객체 지향형 프로그램을 배울때 자주 나오는 개념

다시사용이 가능한 성질

재활용과 재사용은 조금 다른 개념

(재활용 : 다시 활용이 가능한 자원을 가공하여 새로운 제품을 만드는것)

(재사용 : 계속해서 다시 사용이 가능한 성질) >> 주로 소프트웨어 에서만 사용하는 개념

 

재사용의 대해 예를들어, 의존성 문제가 있는 모듈은 다른 프로그램에서 사용하려면 의존하고 있는 모듈이 있어야 사용이 가능하고

독립적인 모듈은 다른 프로그램에서도 사용이 가능하다.

이외에도 다른 이유들로 인해 사용이 가능하고 불가한 경우가 많다.

 

# 재사용성이 높아지면 일어나는 장점

- 개발 기간이 단축됨

   ㄴ 비슷한 소프트웨어를 개발한다고 하면, 기존에 만들어 놓은 모듈을 곧바로 재사용하여 작업하면 되기 때문이다.

- 유지보수가 용이함.

   ㄴ 만약 여러 소프트웨어에서 공통으로 사용하는 모듈에 문제가 생기면 해당 모듈만 수정하면 되기 때문

   ㄴ 재사용성이 높다는건 여러 모듈간의 의존성이 낮다는 이야기.

   ㄴ 각 부분들이 잘 분리되어 있고 쉽게 버그를 찾아서 수정할 수 있다,

 

# 리액트와 재사용성의 연관성

- 컴포넌트 기반, 곧 하나의 컴포넌트가 계속해서 재사용될수 있다는 의미이기도 함.

 

# 거대 스폰서(자본)를 가지고 있다는 장점

메타야.... 지원 종료 하지 말아줘ㅠㅠ

 

# 활발한 지식공유 & 커뮤니티가 잘 갖춰져 있음

예를들어 깃허브에 REACT 프로젝트 페이지를 보면 알 수 있다.(stack overflow도 마찬가지)

 

# React Native 라는 모바일 UI 프레임워크를 이용해 모바일 앱을 개발 할 수 있다.

- 안드로이드는 코틀린이라는 언어를 배워야함

- IOS는 스위프트라는 프로그래밍 언어를 배워야함

- 앱 개발은 프로그래밍 언어뿐만아니라 각각의 개발 프레임워크에 대해서 학습해야한다.

  (그래서 처음으로 앱개발을 하려는 개발자에게는 진입장벽이 높을 수 있다.)

- 하지만 React Native를 사용하면 자바스크립트를 이용하여 안드로이드, IOS를 동시에 만들 수 있다.

   물론 Native 앱 본다는 성능이나 속도에서 부족한 부분을 보이지만, 간단한 수준의 앱은 사용자가 차이점을 못 느낄 정도로 만들수 있다.

 

 

 

# 리액트의 단점

- 방대한 학습량

  ㄴ 기존과 다른 UI형식이기 때문에 배워야 할 것이 많다.

  ㄴ Virtual DOM(가상 돔) / JSX / Component / State(리액트 컴포넌트의 상태) / Props 등 새로운 개념이 등장함

  ㄴ 계속 바뀌는 부분이 나옴.. 버전의 대한 업데이트가 빠름

- 높은 상태관리 복잡도

  ㄴ 익숙해지더라도 웹사이트가 커저 컴포넌트의 갯수가 많아지면 상태관리의 복잡도도 증가한다.

  ㄴ 보통 큰 규모의 프로젝트의 경우 상태관리를 위해서 Redux(리덕스), MobX(몹엑스), Recoil(리코일) 같은 외부 상태관리 라이브러리를 사용한다.