리액트?
UI를 만들기 위한 javascript 라이브러리
리액트의 특징
- 가상 DOM -> 이전 UI상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하여 자동으로 업데이트
- 컴포넌트 기반 (react에서 컴포넌트란 재사용이 가능한 독립된 UI 단위)
- JSX 사용
- 선언적
3세대 웹 프레임워크
3세대 웹? 복잡해진 웹을 효율적으로 개발하고 처리하고자 3세대 웹 등장
- react : facebook에서 만든 library, 오로지 View(화면단)만 담당, 기능이 부족해 다른 library와 함께 사용, 생태계 활성화
- angular : google에서 개발한 framework, typescript기반으로 안정적이나 무겁고 배우기 어려움
- vue : Evan You라는 개인이 개발한 framework, 코드가 깔끔하고 배우기 쉬워 성장 속도가 빠름
리액트의 라이프사이클
- 마운트(생성) componentDidM ount
- 업데이트 componentDidUpdate
- 언마운트(제거) componentWillUnmount
Node.js: javascript가 브라우저 밖에서도 동작하게 하는 환경
npm(Node 기반의 패키지 관리) : Node Package Manager -> 다양한 패키지 설치, 버전 관리
CRA(Create-React-App): 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구
node.modules : CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
package.json : CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정도(종류, 버전)가 기록되는 파일
.gitignore : github에 올리고 싶지 않은 폴더와 파일을 생성
index.html
<div id="root"></div>
index.js
ReactDOM render(<App/>, document.getElementById("root"))
(인자1: 보여주고 싶은 컴포넌트, 인자2: 화면에 보여주고싶은 컴포넌트의 위치)
(App.js가 현재 화면에 보여지고 있는 초기 컴포넌트)
