[React] 리액트 기초부터(1)

기능 개발 사용자 인터페이스 개발에 집중 할 수 있도록 프레임워크, 라이브러리가 만들어져 있다.

이는 생산성, 높은 유지보수성과 연관되어있다.

 

그중 3대장은 angular, react, vue 등이 있다.

 

angular

다양한 기능이 이미 내장되어있다. http클라이언트, 라우터, 다국어 지원 등등

 

react

컴포넌트라는 개념에 집중되어있는 라이브러리이다. -> 프레임워크 아님, angular와 달리 사용자에게 전달되는 view만 신경쓴다. 나머지는 서드파티 라이브러리들을 활용한다.

 

vue

입문자가 사용하기에 손쉽다. 공식 라우터와 공식 상태관리 라이브러리가 존재한다.

 

 

 

Virtual DOM

변화가 일어난다면 JavaScript로 이루어진 가상의 돔에 한 번 렌더링을 하고 기존 돔과 비교를 한 후 정말 필요한 곳에만 업데이트를 해준다. 바뀐 부분만 찾아서 그 부분만 변경을 시킨다.

 

 

https://www.youtube.com/watch?v=BYbgopx44vo

 

webpack

코드들을 의존하는 순서대로 합쳐서 하나 또는 여러개의 파일로 결과물을 만들어낸다. javascript 파일에서 import 구문으로 들고 올 수 있다. bundling 작업을 할 때 특정 확장자 마다 어떠한 처리 작업을 하도록 준비하는 것

ex) 이미지들을 압축하고 결과물을 특정 경로에 특정이름으로 저장하도록 할 수 있다. javascript 파일을 여러개 만들었을때 하나하나 합쳐서 하나의 파일로 만들어 줄 수도 있다.

웹프로젝트를 만들때 전체적으로 파일을 관리해주는 도구

 

babel

자바스크립트 변환도구

 

 

 

 

 

*이 글은 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌를 토대로 공부를 하며 작성하였습니다.