React

페이스북에서 만든 사용자 인터페이스 (UI)를 만들기 위한 자바스크립트 라이브러리입니다.

프레임워크와 라이브러리

공통점

• 재사용 가능한 코드의 모음
• 프로그래밍을 쉽게 할 수 있도록 도와주는 역할

프레임워크

프레임워크는 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미합니다.

• 필요한 기능이 대부분 만들어져 있어서 틀이 있으면 안에 있는 내용을 만든다.
• 틀에서 벗어나기 힘들다.
• 다른 프레임워크를 같이 사용할 경우 충돌 발생된다.

쉽게 이해하면, 밀키트처럼 재료와 요리방법이 정해진대로 개발을 해야합니다.
ex) 부트스트랩, 앵귤러, 뷰

라이브러리

라이브러리는 특정 기능을 모와둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미합니다.

• 필요한 부분에 가져다쓰는 개념이다.
• 다른 프레임워크와 충돌할 일이 없다.

쉽게 이해하면, 냉장고처럼 내가 필요한 재료만 빼서 개발을 해야합니다.
ex) 리액트, express.js

리액트를 사용하는 이유?

• 리액트의 생태계가 잘 활성화 되어 있다.
• 가장 많이 쓰이기도하고 많이 알려져있어서 구글링에 대한 정보나
• 공식문서도 잘 되어 있어서 정보공유가 활발하다.

Virtual Dom

브라우저는 dom 기반으로 작동합니다.
리액트는 페이지가 변화될때 브라우저의 돔에 새로운 돔을 넣는 게 아니라,
자바스크립트로 이루어진 가상의 dom에 한번 랜더링 시켜준 후,
기존의 dom과 비교를 하고 정말 변화가 필요한 곳에만 업데이트를 해줍니다.

Virtual Dom 장점

이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술.
불필요한 UI 업데이트는 줄고, 성능은 좋아지게 된다.

참고자료1
참고자료2
참고자료3