리액트란?
'사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리'이다.
리액트는 현존하는 UI 라이브러리 중에서 가장 많이 사용되고 있는 인기 라이브러리이다.
*User Interface(UI)란 사용자와 컴퓨터 프로그램이 상호작용을 할 수 있도록 중간에서 입력과 출력의 중개자 역할 하는 접점을 의미.
리액트의 특징
SPA(single Page Application) 방식의 개발을 지원한다. SPA는 하나의 페이지만 존재하는 웹앱을 의미하며, 리액트는 가상 DOM을 통한 페이지 업데이트를 처리함으로써 웹사이트 로딩 시간을 줄여준다는 장점을 제공한다.
*여러화면을 가진 페이지를 만드려면 그 페이지 수만큼 HTML을 작성해야하지만, React는 HTML 문서 하나로 여러 페이지를 제공한다.
- 레이아웃 구성에 편의를 제공하는 컴포넌트 기반 구조
- 코드 작성 시간을 줄여주는 재사용성
- 거대한 커뮤니티와 다양한 관련 라이브러리
- 모바일 앱 개발 프레임워크로의 영역확장
CRA(create-react-app)
CRA는 리액트로 웹 애플리케이션을 개발하는데 필요한 모든 설정이 적용된 프로젝트를 생성해주는 개발 도구로, 대부분의 리액트 웹 개발은 이를 통해 진행된다.
CRA는 node.js를 기반으로 동작한다.
명령문
npx create-react-app 프로젝트명
*npm: node package manager: 노드가 지원하는 자바스크립트를 지원하는 명령어
*npx: create-react-app이 자동적으로 최신버전을 다운받도록 하는 명령
myapp > package.json(node파일) >"scripts"
react 앱실행 명령문: npm start
CRA 프로젝트 수정방법
CRA 프로젝트에서 가장 중요한 것은 src 폴더. src 폴더 안의 index.js파일은 리액트 애플리케이션이 실행될 때 가장 먼저 실행되는 진입점 (entry point) 역할을 한다. npm start를 하면 index.js가 가장 먼저 실행되는 것 !
어플리케이션을 생성하면 html 파일은 public 폴더에 index.html 파일 하나만 존재한다(SPA특성).
<div id='root'>태그안에 가상 DOM을 실행, 중단을 통해 운영됨
root: 리액트 라이브러리에서 제공하는 createRoot을 통해 index.html에 있는 root div를 가져오고 저장
<APP/>: 가상 DOM으로 실제 요소의 시작점, 화면에 보여지는모든 UI를 의미
<APP/>의 실제 내용은 index.js 파일과 같은 디렉터리에 존재하는 APP.js 파일에 존재.
APP.js 파일의내용을 수정하여 <APP/> 태그를 렌더링 하는 것이 CRA 프로젝트의 기본적인 수정방법
APP.js를 수정하면 화면이 수정된다!