[React] 리액트는 어떻게 작동할까?

리액트는 빌드 프로세스를 사용한다.

즉, 작성한 코드가 그대로 브라우저에서 실행되지 않고, 브라우저에 전달되기 전에 내부적으로 코드가 수정되는 것이다.

package.json 파일에서 프로젝트가 사용하는 모든 의존성 라이브러리들을 확인할 수 있다.

이 중 react-scripts 패키지는 브라우저에 전달되기 전에 코드를 변환하는 다양한 툴을 제공한다.

그 중 하나가 HTML 파일 <body>안에 script를 추가하는 것이다.

백그라운드의 빌드 프로세스가 script 요소를 생성하고 HTML 파일에 추가한다.

리액트 코드는 따로 처리하지 않으면 브라우저에서 실행할 수 없기 때문이다.
- 리액트는 JSX 기능을 사용한다. JSX는 자바스크립트 파일에 작성된 HTML 코드이다.
- 이는 표준 자바스크립트 기능이 아니므로 정상적으로 작동하지 않는다.
- 리액트의 핵심 기능 중 하나가 자바스크립트 파일에 HTML 같은 코드를 넣는 것이다.
- 이 기능을 활성화하려면 자바스크립트가 이해할 수 있도록 코드를 변환해야 한다.
작성한 코드가 프로덕션을 위해 최적화되지 않았기 때문이다.
- 최적화란 충분히 간소화되지 않았음을 말한다.
- 간소화란 사용자에게 전달할 수 있을 만큼 충분히 변수 또는 함수 이름이 짧게 변형되는 것을 말한다.
- HTML에 import 된 스크립트 코드를 열어보면 복잡한 자바스크립트 파일이 나오는데, 이는 웹사이트 방문자가 다운로드할 코드 양을 최대한 줄일 수 있도록 최적화된 코드이다.

Studee