리액트 기초

5o_hyun·2022년 12월 19일
0
post-thumbnail

리액트란?

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

  • 라이브러리 : 자주 사용되는 기능들을 정리해 모아놓은것
  • 사용자인터페이스(UI) : 사용자와 컴퓨터프로그램이 상호작용을하기위해 중간에서 입출력을 제어해주는것 (버튼등) ex) react, angular.js, vue.js

프레임워크(vue) vs 라이브러리(react)
프레임워크는 프로그램흐름에대한 제어권한을 프레임워크가 갖고있고,
라이브러리는 제어권한이 개발자에게 있다.

리액트의 장점

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

탭에서 메뉴등을 클릭시 페이지가 바뀐다. 화면이 업데이트가 된다는말은 DOM이 수정된다는말을의미한다. 수정될데이터를 DOM에서 모두 찾기때문에 성능과 비용에 많은 손실이있다.

리액트는 Virtual DOM(가상돔)을 사용한다. 이것은 웹페이지와 실제 DOM에서 매개체역할을 한다.
리액트는 DOM을 직접수정하는게아니라 업데이트 할 부분의 최소한의 부분만 찾아서 업데이트한다. 따라서 변경된 부분을 사용자에게 빠르게 보여줄수있다.

2. 컴포넌트 기반

리액트는 컴포넌트들의 조합으로 구성되어있다. 다음에 나올 재사용성이 좋다.

3. 재사용성

다시 사용이 가능한 성질을 말한다. 의존성이나 호환성에 의해 다른곳에의해 쉽게 못쓸수 있기 때문에 의존성을 낮춰 개발해야한다.

  1. 개발시간의 단축
  2. 유지보수가 용이

  • 든든한지원군 meta
    자본이 투자되어야 오픈소스가 관리가된다.. meta가만든 리액트 ..짱

  • 많은 커뮤니티와 개발자들이 많아서 구글링하면 원하는답을 쉽게찾을수있다는점이 좋은것같다.

  • reaxt native로 모바일앱가능.. 안드로이드는 코틀린 아이폰은 스위프트를 배워야하는데 모바일앱개발을 할수있다. 자바스크립트로 코딩해서 안드로이드와 ios를 만들수있다 물론 성능면에서는 안좋을수있으나 사용자는 간단한거에서는 느끼지못한다.

리액트 단점

1. 방대한 학습량

vistual dom? jsx? compononet? state? props?

2. 계속 뭔가 바뀜... 또 새로공부해야됨 => 개발자의숙명

3. 높은 상태관리 복잡도

성능 최적화를위해 state를 잘 관리하는것이 필요한데, 웹페이지가커져 상태관리의 복잡도가 증가하면 리덕스같은 외부라이브러리를 사용한다.

profile
학생 점심 좀 차려

0개의 댓글