프론트엔드 라이브러리란 무엇인가?
라이브러리의 필요성
- 사용자와의 인터랙션과 다양한 동적인 기능을 위함
- 프로젝트의 규모가 커지고, 다양한
유저 인터페이스와인터랙션을 제공하게된다면 => 많은 DOM요소를 관리하고 코드까지 정리하게 되어 힘들어진다.
웹개발을할때 귀찮은 DOM관리와 상태 값 업데이트 관리를 최소한으로하고 오직 기능개발, 사용자 인터페이스 구현에 집중할 수 있도록 라이브러리 프레임 워크가 만들어졌다.
- 우리가 프레임워크나 라이브러리를 사용하는 것은 개발할때 생산성과 깊게 관련있고 더 높은 유지 보수성을 유지해준다.
리액트
- 컴포넌트 개념에 집중되어 있는
라이브러리이다.
- 프레임워크가 아니다.
- 컴포넌트란? 데이터를 넣으면 지정한 인터페이스를 조립해서 보여준다. 리덕스,리액트 라우터같은 다양한 라이브러리 제공- 하지만 공식라이브러리 개념이 없다. 한가지 문제해결을 위해서 여러 솔루션이 있다
- 또한 생태계가 굉장히 넓다.
리액트의 Virtual DOM
프레임워크의 공통점은? Model
데이터가 바뀔때마다 즉각적으로 변화하도록 하는 양방향바인딩 속성이 있다.
변화
페이스북에서는 데이터가 바뀌면 mutation하지 않고 view하면 어떨까? 라는 생각을 하게된다.
but 간단해보이지만 브라우저는 DOM기반으로 작동하기 때문에 페이지가 그때그때 view를 만들려고하면 성능적으로 문제가 생길 것이다.
그래서 존재하는게 바로
virtual DOM
= 가상돔이다.
변화가 일어나면 브라우저 돔에 새로운 것을 넣는게 아니라 자바스크립트로 이루어진 가상의 돔에 한번 렌더링을 하고 기존의 돔과 비교한뒤 변화가 필요한 곳에만 업데이트를 해주는 것
virtual DOM을 사용함으로 데이터가 바뀌었을때 더이상 어떻게 업데이트할지를 고려하는게 아니라 일단 바뀐 데이터로 그려놓고 비교를 한 다음에 바뀐 부분만 찾아서 바꿔주는 것이다.
리액트를 특별하게 만드는 점
- 다양한 생태계
라이브러리가 매우 다양함
- 자바스크립트 라이브러리를 리액트에서 포팅해서 사용하는 경우
- 라우터, 상태관리- 생태계가 다양하다보니 좋은 것들이 많이 나옴
- 사용하는 곳이 많다.
- 페이스북, 에어비앤비, 야후 등
리액트 프로젝트 시작하기
웹팩
- 웹팩은 코드를 의존하는 순서대로 합쳐서 하나 또는 여러개의 파일로 결과물을 만들어주는 것
정리하자면 웹프로젝트를 만들때 전체적으로 파일들을 관리해주는 도구라고 이해하면 된다.
바벨
- 자바스크립트 변환 도구
- 자바스크립트는 계속해서 새로운 문법으로 발전중인데 노드 js나 브라우저의 자바스크립트 엔진에서 모든 문법을 지원하지는 않기 때문에 바벨이 필요하다.
- 리액트에서도 jsx문법을 사용할때 바벨이라는 도구가 사용된다.
💻 강의 링크
🔍 참고문서
React and the Virtual DOM
프론트엔드 주니어 개발자 🚀