🐬 리액트란 ?

리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 전적으로 사용자 인터페이스를 렌더링 하는 데 관여한다.

• 프레임워크 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것. (Vue, Angular 등)
• 라이브러리 어떤 특정 기능을 모듈화 해놓은 것.

  프레임워크는 라이브러리를 포함하고 있다!

👯‍♀️ 컴포넌트 (Component)

리액트로 만들어진 앱을 이루는 최소한의 단위
컴포넌트가 여러 개로 나누어져 있기 때문에 하나의 컴포넌트를 여러 곳에서 사용할 수 있거나 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수도 있다.

• 클래스형 컴포넌트
• 함수형 컴포넌트

👾 가상돔 (Virtual DOM)

어떤 인터렉션에 의해 DOM에 변화가 발생하면 그 때마다 Render Tree가 재생성된다.
즉 모든 요소들의 스타일을 다시 계산해야 하는데, 인터렉션이 적으면 괜찮지만 많은 웹이라면 불필요하게 DOM을 조작하는 비용이 너무 크게 된다. 성능 상의 문제를 초래하는 것을 해결하기 위해 가상 돔 (virtual dom)이 나오게 됐다.

리액트는 메모리 상에 항상 렌더링 이전의 가상돔과 렌더링 이후의 가상돔을 가지고 있다.
어떠한 State(데이터)가 바뀌면 가상돔이 새로 생성된다.
이전 가상돔과 비교(diffing)하여 바뀐 부분만 실제 돔에 적용( 재조정, reconciliation )시킨다.

React는 실제 DOM의 메모리 내 가상 표현을 유지하고 batch 업데이트와 동기화를 유지한다.

batch update : State를 업데이트 할 때 한번에 업데이트 해줘서 화면이 한 번만 다시 그려지게 해준다.

reconciliation을 통해 여러개의 State(데이터)가 변하더라도 가상돔을 비교해서 한 번의 DOM 조작으로 모든 변화를 반영시킨다.

✨리액트 설치와 사용

npx create-react-app 
npm start

프로젝트 생성해주는 명령어 npx create-react-app

폴더 구조

• public 폴더 -static 파일.

  • index.html : 템플릿, public 내부의 파일만 public/index.html에서 사용할 수 있다.

• src 폴더 - 소스 짜는 곳. webpack은 여기에 있는 파일만 본다. 그래서 이 폴더 이외에 넣는 것은 webpack에 의해서 처리되지 않는다.

  • index.js : 자바스크립트 시작점 (진입점) 전역적인 설정들이 들어간다.

• package.json 파일
  앱을 시작할 때 사용 할 스크립트, 앱을 빌드할 때, 테스트할 때 사용할 스크립트 등이 명시되어 있다.

JSX (Javascript syntax extention) ?

자바스크립트의 확장 문법.
자바스크립트(logic)와 HTML 구조(markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있다.
기존 html 문법과 다른 점이 많은데, 예를 들어 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나(<React.fragment>, <>)로 감싸줘야 한다. 코드가 브라우저에서 실행되기 전 바벨을 사용하여 일반 자바스크립트 문법으로 변환된다.

리액트 공식 문서
참고 사이트

Babel
최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환시켜주는 라이브러리