1.리액트 소개 - 2)리액트의 장단점

장점
1. 빠른 업데이트(요청에 따라 화면에 내용이 빠르게 나타나는 것)

기존의 웹페이지 변화

• 사용자와 상호작용을 하는 웹페이지의 경우 화면업데이트가 빈번하게 일어난다
• 화면의 업데이트가 빈번하게 일어난다는 뜻은 돔(화면정보)이 수시로 변경된다는 뜻이다
• 돔의 수정은 수정부분을 돔에서 모두 찾아야 하기에 성능에 영향을 크게 미치고, 비용도 많이 들게 된다


리액트

• 업데이트 해야할 최소한의 부분만 찾아서 수정한다
• State Change(상태 변경) -> Compute Diff(가상의 돔에서 업데이트될 최소한의 부분 검색) -> Re-render(검색된 부분만 업데이트 후 다시 렌더링)
• Virtual DOM : 가상의 돔.
  • DOM(Document Object Model) : 웹 페이지를 정의하는 하나의 객체. 웹사이트에 대한 모든 정보
  • 즉, 가상의 돔은 웹사이트의 일부를 가상으로 띄워 페이지 전환을 빠르게 하는 것

2. Component-Based

컴포넌트란?

• 리액트에서는 모든 페이지가 Component(구성요소)로 구성됨
• 하나의 component는 또 다른 여러 component의 조각으로 구성될 수 있음
• 레고 조립하듯 컴포넌트들을 모아서 개발
• Ex) 유튜브의 메인화면에 반복되는 동영상의 레이아웃들

컴포넌트의 장점

• 재사용성(Reusability) : 계속해서 다시 사용이 가능한 성질을 의미.
• 재활용과는 다르다 재활용 : 다시 활용이 가능한 자원을 가공하여 새로운 제품을 만드는 것
• 물리적인 물질은 쓰면 쓸수록 닳기 때문에 기본적으로 재사용이 불가능하다

재사용 조건

• 곧 바로 재사용 가능한 컴포넌트는 없다
• Calendar(달력)은 Date(날짜)에 의존성을 갖고 있다.(달력을 출력하기 위해, 날짜에 대한 선언을 먼저 해야한다.)
• String(글자) 다른 모듈에게 의존성이 없기 때문에 독립적으로 재사용 가능
• 호환성도 중요하다
• 재사용성이 높게 개발하다 -> 다른 곳에도 쉽게 곧바로 쓰일 수 있는것
• 다른 모듈의 의존성을 낮추고, 호환성 문제가 발생하지 않도록 개발

재사용성의 장점

• 전체 소프트웨어의 개발 기간이 단축된다(기존에 개발해 둔 모듈로 개발하기 때문에)
• 유지보수가 용이하다. 공통으로 쓰는 모듈이 고장시 해당 모듈만 수정하면 되기 때문이다
• 버그 발생시 전체 돔을 확인하는 것이 아닌, 모듈 하나에서 버그를 찾고 의존성이 낮기 때문에 버그의 범위가 작아진다
• …

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

• 컴포넌트들은 반복적으로 사용 가능
• 즉, 컴포넌트들은 재사용성이 있다
• 리액트 컴포넌트 개발 시 쉽고 재사용가능하게 개발

3. Meta(Facebook)

• 자본이 투입되어야 오픈소스 프로젝트가 유지될 수 있다

4. 활발한 지식공유 & 커뮤니티

• https://github.com/facebook/react
• GitHub에 스타의 점수가 213k(21만) - 2023.09.07
• https://stackoverflow.com/questions/tagged/reactjs
• Stackoverflow(개발 질문, 답변 커뮤니티)에서 기술의 언급정도 466k(46만) - 2023.09.07

5. React Native(모바일 환경 UI 프레임워크)

• 보통 개발언어 안드로이드-Kotlin, IOS(애플)-Swift를 배우고, 각각의 개발 프레임워크도 배워야 한다
• 처음 개발하려는 개발자에게는 모바일 진입장벽이 높다
• But, React Native를 사용하면 자바스크립트로 만들어 안드로이드와 IOS에서 사용할 수 있다
• But, 무거운 앱은 성능차이를 느낄 수 있다

단점
1. 방대한 학습량

• 기존과 다른 방식의 UI라이브러리
• Virtual DOM? JSX? Component? State? Props?
• 기술이 계속 바뀌므로 꾸준히 공부해야 한다

2. 높은 상태관리 복잡도

• State 개념 : react component의 상태
• 가상의 돔(Virtual DOM)이 요청에 의해 컴포넌트(component)가 변경될때, 이를 상태(State)에서 감지
• 성능 최적화를 위해 state(상태)의 관리가 중요하다
• 외부 상태관리 라이브러리 : Redux, Mobs, Recoil