React.js

React.js

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

출처 : 위키백과

 

Why React.js ❓

✔ React 는 Component 기반의 UI 라이브러리

• 만약 Header 요소에 문제가 생겨서 수정해야 되는 상황이면
• 기존 방식은 Header 를 포함하고 있는 모든 파일을 수정해야 됩니다.
• 하지만 컴포넌트화 방식은 컴포넌트가 정의된 파일 하나만 수정하면
  다른 페이지들은 자동으로 수정 됩니다.
• 즉, 공통으로 사용되는 요소의 수정 사항이나, 문제가 발생 했을 경우 수정하기 수월하고,
  유지보수가 좋아집니다.

 

✔ React 는 선언형 프로그래밍

• 프론트엔드 측면에서 오른쪽의 선언형 프로그래밍이 요즘 시대에 더 각광 받고 있습니다.

 

✔ Virtual DOM ( 가상 돔 )

• DOM : 브라우저가 실제로 사용하는 객체
  

 

• DOM 의 흐름
  
• DOM 에서 변화가 일어날 때 마다 위의 작업이 계속 반복 됩니다.
• 잦은 업데이트에서 필요 이상의 연산이 필요하고, 성능 저하의 문제로 이어집니다.

 

• Virtual DOM
  
  
• 기존의 발생하는 변화를 실시간으로 실제 DOM (화면에 나타나는 DOM) 에 업데이트 하지 않고
• 가상의 DOM 을 업데이트 후( 화면에 실제로 그리지는 않습니다.)
• 업데이트 해야할 부분을 모아서 한 번에 실제 DOM에 업데이트 하는 방식으로 과다 연산을 해결 할 수 있습니다. ( 5번 업데이트 해야할 일을 -> 1번에 해결 한다! )

 

✔ 정리

리액트란 ❓

• 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
• SPA 를 쉽고 빠르게 만들 수 있도록 해주는 도구

 

✔ 리액트의 장점

• 빠른 업데이트와 렌더링 속도
• 재사용성이 높은 컴포넌트 기반 구조
• 활발한 지식 공유와 커뮤니티
• 리액트 네이티브를 통한 모바일 앱 개발 가능

 

✔ 리액트의 단점

• 높은 상태 관리 복잡도

 

참고

• 인프런