리액트는 워낙 변화가 빠른 라이브러리라 공식문서로 학습하는 것이 젤 좋다고 하지만 아직 공식문서를 깊이있게 제대로 파악하지 못하는 것 같아 강의와 공식문서를 함께 공부하려 한다. 그럼 리액트란 무엇이며, 리액트를 왜 사용하는 걸까?
React란?
웹 및 네이티브 사용자 인터페이스를 위한 자바스크립트 라이브러리이다.
리액트로 구현된 대표적인 웹사이트로 Netflix가 있다. 사이트를 탐색해보면 전환이 부드럽고 즉각적인것을 확인할 수 있다. 즉, 새 페이지가 로딩되는 듯한 효과가 없는데 어떻게 보면 모바일 앱 같은 반응이기도 하다.
리액트는 자바스크립트가 웹사이트 백그라운드에서 실행되며 로딩이 완료된 페이지를 읽고 조작하기 때문에, 웹페이지와 페이지에 표시되는 사용자 인터페이스를 재로딩 없이 업데이트하여 페이지끼리 부드럽게 전환되도록 한다.
자바스크립트만으로도 이러한 작업은 가능하지만 손이 많이가고 오류가 발생하기 쉽다. 리액트 같은 라이브러리는 이러한 작업을 편하게 도와준다.
작동원리
리액트는 CSR(Client Side Rendering)방식을 채택하여, 클라이언트 혹은 서버로 부터 데이터를 받아 변수를 감시하며 값이 변할때마다 HTML 코드를 살피고 조건을 점검, 코드를 실행한 다음 생성되는 UI가 이전에 렌더링 된 것과 다른지 확인한다.
데이터가 변경되면 React가 사용하는 가상 DOM(Virtual DOM)을 수정한다. 이전의 가상 DOM과 비교하여 변경된 부분을 체크하여 변경된 부분만 실제 DOM에 적용하기 때문에 빠른 성능을 보여준다.
리액트는 코드를 선언형으로 작성하는데, 이는 목표로 하는 UI의 상태를 정의할 뿐, 거쳐야 할 단계를 정의하지 않음을 의미한다. 즉, 리액트가 과정을 알아서 파악해 필요한 단계를 수행한다. 이를 통해 코드를 추상화하여 재 사용성을 높인다.
반대로 자바스크립트는 선언형이 아니라 명령형으로 작성하는데, 목표가 아니라 거쳐야할 단계를 정의한다. 목표를 정의하는것보다 단계를 정의하는 것이 더 복잡하고 어렵기 때문에 간단한 동작임에도 이를 수행하기까지 여러 단계가 필요하다. 이러한 일련의 단계를 리액트가 대신한다.
//명령형 코드
const root = document.getElementById('root'),
header = document.createElement('h1'),
headerContent = document.createTextNode('Hello, world!');
header.appendChild(headerContent);
root.appendChild(header);
//React로 재작성한 선언형 코드
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>); 빌드 프로세스
-
React 프로젝트는 빌드 프로세스를 사용한다. 즉, 작성한 코드가 그대로 브라우저에서 실행되지 않고, 대신 코드는 내부적으로 수정된 후 브라우저에 전달된다.
내부적인 빌드 프로세스는 package.json 파일에서 확인할 수 있으며, 해당 파일에 프로젝트에서 사용하는 모든 의존성과 라이브러리의 목록이 있다.
react와 react-dom 을 확인할 수 있으며, react-scripts 라이브러리도 확인할 수 있다.
react-scripts 패키지는 브라우저에 전달되기 전 전달될 HTML 파일에 script태그를 추가한다. -
처리되지 않은 리액트 코드는 브라우저에서 실행될 수 없는데 리액트 코드는 JSX기능을 사용하기 때문이다. JSX코드는 자바스크립트 파일에 작성된 HTML 코드를 의미하는데 표준 자바스크립트 기능이 아니므로 정상적으로 작동하지 않는다.
리액트의 핵심은 자바스크립트 파일에 HTML 같은 코드를 넣는것이기 때문에 이 기능을 활성화 하려면 코드를 변환해야 하는 것이다.
import와 export
자바스크립트에선 export와 import 기능을 사용하려면 script type="module" 속성을 사용해야 한다. 하지만 리액트 프로젝트는 빌드 프로세스가 import와 export 키워드가 있는 개별파일을 모두 합쳐 하나의 큰 파일을 만든 다음 기존 신택스를 순서대로 사용해 import 구문을 처리하기 때문에 자동으로 추가된 sciprt 태그에 type="module" 속성이 작성되어 있지 않다.
리액트를 통하면 브라우저가 여러 개의 작은 js파일을 다운로드하는 대신 몇 개의 큰 파일을 다운로드 하면 되므로 자바스크립트만을 이용하는거 보다 효율적이다.
xport let apiKey = "dummy";
import { apikey } from "상대 경로";
//import 명칭은 대소문자를 구분한다.
//import시 자바스크립트만을 사용한다면 파일의 확장자를 입력해야한다.
//리액트는 빌드 프로세스에서 자동으로 확장자를 추가해주기 떄문에 확장자 생략default 키워드를 추가하면 export하는 기본값을 설정할 수 있는데 파일별로 하나의 default만 존재할 수 있다. 리액트에서는 파일당 하나의 컴포넌트, 즉 하나의 자바스크립트 함수만 존재하는 경우가 많으므로 주로 default를 이용한다.
export default "Dummy";
import apiKey from "상대경로";
//default엔 이름이 할당되어 있지 않으므로 import하려는 파일에서 원하는 이름을 설정한다.참고
[React 공식문서] https://ko.legacy.reactjs.org/
[Udemy] React - The Complete Guide 2023 (incl. React Router & Redux)
