[React.js] React(리액트)

📓React 

• A JavaScript Library for Building User Interfaces
• 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
• 복잡한 사이트를 쉽고 빠르게 만들며 관리하기 위해 만들어진 것
• SPA
  • Single Page Application
  • 하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션을 의미
  • 하나의 HTML 틀을 만들어 놓고 사용자가 특정 페이지를 요청할 때 그 안에 해당하는 페이지의 내용을 채워서 보내주는 것
  • React는 SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구

📓React 장점

• 빠른 업데이트 & 렌더링 속도
  • 우리가 웹사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 것
  • 빠른 업데이트는 웹사이트에서 굉장히 중요한 부분 중 하나
  • Virtual DOM 사용
    • 가상의 DOM
    • DOM (Document Object Model)로 웹페이지를 정의하는 하나의 객체
    • 하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇
    • 웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 하는 것
    • 일반적으로 사용자와 상호작용을 하는 웹사이트 같은 경우 화면의 업데이트가 수시로 이뤄짐
    • 화면이 업데이트 된다는 말은 DOM이 수정된다는 말과 동일
    • DOM을 직접 수정하는 기존의 방식을 사용하면 성능에 영향을 크게 미치고 비용도 많이 듬
  • React는 DOM을 직접 수정하는 것이 아니라 업데이트해야 할 최소한의 부분만을 찾아서 업데이트
  • 검색된 부분만을 업데이트하고 다시 렌더링 하면서 변경된 내용을 빠르게 사용자에게 보여줄 수 있음
• Component-Based
  • 컴포넌트 기반의 구조
  • 캄포넌트는 구성요소라는 뜻을 가짐
  • React에서는 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성
  • React로 개발된 웹페이지는 수많은 컴포넌트의 조합으로 구성
• 재사용성 (Reusability)
  • 객체지향 프로그래밍을 배울 때 등장하는 개념
  • 소프트웨어 개발에 있어 굉장히 중요한 개념
  • 게속하여 다시 사용이 가능한 성질 의미
  • 재사용이라는 개념은 소프트웨어 분야에서만 사용
  • 모든 소프트웨어가 곧바로 어떤 곳애서든 재사용 가능하지는 않음
  • 재사용을 하려고 할 때 의존성 문제 말고도 여러가지 호환성 문제가 발생할 수 있음
  • 소프트웨어 개발할 때 재사용성이 높게 개발해야 한다는 것은 소프트웨어 또는 모듈이 다른 곳에도 쉽게 곧바로 쓸 수 있도록 개발하는 것을 의미
  • 다른 모듈의 의존성을 낮추고 호환성 문제가 발생하지 않도록 개발해야 한다는 의미
• 재사용성이 높아짐에 따른 장점
  • 전체적인 소프트웨어의 개발 기간 단축
    • 비슷한 소프트웨어를 개발한다고 할 때 기존에 개발해 둔 모듈을 곧바로 재사용하여 개발하면 되기 때문에 개발 기간을 굉장히 많이 줄일 수 있음
  • 유지 보수가 용이함
    • 여러 개의 소프트웨어에서 공통으로 사용하는 모듈에 문제가 생기면 해당 모듈만 수정해서 다시 배포하면 됨
    • 소프트웨어를 개발하다 보면 예상치 못한 버그를 마주하는 상황이 빈번하게 발생하는 데 이런 경우 재사용성이 높은 형태롤 개발되어 있다면 좀 더 버그의 원인을 찾기 쉬움
    • 재사용성이 높다는 것은 여러 모듈 간의 의존성이 낮다는 것을 뜻함
    • 각 부분이 잘 분리되어 있고 쉽게 버그를 찾아서 수정할 수 있음
• 리액트와 재사용성
  • 각 컴포넌트들은 웹 사이트의 여러 곳에서 반복적으로 사용될 수 있음
  • 하나의 컴포넌트가 계속해서 재사용될 수 있음
  • 리액트 컴포넌트를 개발할 때 항상 쉽고 재사용 가능한 형태로 개발하는 것이 중요
  • 다른 웹사이트를 쉽고 빠르게 개발이 가능
• Meta라는 든든한 지원군
  • React는 Meta가 만든 오픈소스 프로젝트
  • 오픈소스 프로젝트라고 해서 모든 것이 무료로 알아서 돌아가지는 않음
  • 프로젝트가 성장하고 꾸준히 유지되기 위해서는 수많은 개발자들의 노력이 필요
• 활발한 지식공유 & 커뮤니티
  • 어떤 새로운 기술이 등장하는 초창기에는 해당 기술을 처음 사용하다가 어느 순간 모르는 것이 등장하여 진행이 막히거나 더뎌지는 경우 생김
  • 개발 생태계와 커뮤니티가 갖춰져 있지 않으면 원하는 답을 얻기가 생각보다 힘듬
  • 활발한 지식공유와 활성화된 커뮤니티는 React의 굉장히 큰 장점이자 중요한 부분
  • 내가 모르는 것을 바로바로 찾아서 볼 수 있다는 것은 엄청난 장점이 됨
• 리액트를 배운 이후에 리액트 네이티브를 사용하여 모바일 환경 UI 프레임웤을 사용하여 모바일 앱도 개발 가능
  •  리액트 네이티브를 사용하면 자바스크립트로 한번 코딩해서 안드로이드 앱과 ios 앱을 동시에 제작 가능
  •  네이티브 앱보다 성능이나 속도 면에서 부족한 부분을 보일 수 있지만 간단한 수준의 앱은 사용자가 차이점을 느끼지 못할 정도로 개발 가능

📓React 단점

• 방대한 학습량
  • 기존과는 다른 방식의 UI 라이브러리이기 때문에 배워야 할 것이 많음
  • 새로운 개념들이 굉장히 많이 등장
  • 특정 기술을 한번 배웠다고 끝나는 것이 아닌 바뀌는 부분에 대해서도 꾸준히 공부하여야 함
  • 새로운 버전이 나오면 이에 대한 내용을 학습하고 이해하고 있어야 실제 업무에서 원활하게 개발 할 수 있음
• 높은 상태관리 복잡도
  • state라는 굉장히 중요한 개념 등장
  • state은 리액트 컴포넌트의 상태를 의미
  • VirtualDOM에서 바뀐 부분이 state가 바뀐 컴포넌트를 의미
  • state는 굉장히 중요한 역향을 담당하고 있다고 할 수 있음
  • 성능 최적화를 위해 state를 잘 관리하는 것이 중요한데 처음엔 생각만큼 쉽지 않을 수도 있고 익숙해지더라도 웹 사이트의 규모가 커져 컴포넌트의 개수가 많아지면 상태 관리의 복잡도도 증가
  • 보통 큰 규모의 프로젝트의 경우 상태 관리를 위해 외부 상태관리 라이브러리를 사용하는 경우가 많음

📓라이브러리

• 자주 사용하는 기능들을 정리해 모아 놓은 것
• 프로그래밍 언어에서 라이브러리는 특정 프로그래밍 언어에서 자주 사용되는 기능들을 잘 모아서 정리해 놓은 모음집

📓사용자 인터페이스 (User Interface, UI)

• 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해주는 것

📓UI 라이브러리

• 사용자 인터페이스를 만들기 위한 기능 모음집
• React는 대표적인 자바스크립트 UI 라이브러리
• 화면을 만들기 위한 기능을 모아 놓은 것

📓프레임워크 VS 라이브러리

• 가장 큰 차이점은 프로그램의 흐름에 대한 제어 권한 
• 프레임워크는 흐름의 제어 권한을 개발자가 아닌 프레임워크가 가지고 있음
• 라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태