1️⃣ 리액트란?
사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리 이다.
규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 프레임워크, 라이브러리가 등장하게 된다. 그 중에 리액트는 오로지 View만 담당한다.
◾️ 특징
- 선언적
- 컴포넌트를 이용해 재사용성이 용이
- virtual dom을 위한 최적화 (한번에 필요한 부분만 업데이트 해주기 위한 )
◾️ Virtual DOM
리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점이다. 리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.
참고 : https://www.youtube.com/watch?v=BYbgopx44vo
◾️ CRA
Create react app(툴체인) 도구들을 엮어서 모아둠
💡 툴체인이란, 컴퓨터 프로그램을 제작하기 위해 필요한 개발도구 모음을 뜻한다.
리액트는 UI 기능만 제공하기 때문에 개발자가 직접 구축해야하는 것들이 많다.
때문에CRA는 웹 어플리케이션을 만들기 위한 환경을 제공한다.
SPA(Single Page Application)를 만들기 위해서 CRA를 가장 많이 사용한다.
CRA 사용하기 전에 작업 환경을 설정해야 한다.
Node, npm
Node= 브라우저 밖에서도 자바스크립트를 실행할 수 있게 만들어주는 실행 환경.
즉, 자바스크립트 실행 환경이다. 노드로 자바스크립트를 서버단에서 개발할 수 있게 되었다.
리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야 한다.npm
Node기반의 패키지를 사용하려면npm이라는 패키지 도구가 필요하다.npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다.
◾️ 컴포넌트
재사용 가능한 UI 단위를 뜻한다.
블록들을 모아서 성을 쌓고, 부품들로 자동차를 만들고.. 독립적으로 사용할 수 있는 하나의 모듈을 말한다.
웹 개발하면서 유지보수에 이점을 가지고 있는 것이 바로 이 컴포넌트라고 할 수 있다.
컴포넌트 = 독립적으로 사용할 수 있는 하나의 모듈이다.
컴포넌트의 특징
- 재활용하여 사용할 수 있다.
- 코드 유지보수에 좋다.
- 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
- 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.(부모 컴포넌트 - 자식 컴포넌트)
◾️ JSX
Javascript syntax extension => 자바스크립트 확장 문법
자바스크립트에서 만든게 아니라 리액트에서 만든 문법
JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환한다.
자바스크립트계의 파파고 = 바벨. 즉, 바벨은 번역기 역할을 한다.
