React가 뭔가요.. ?

 

주말에 가만히 누워서 유튜브를 보던중 ... 평소에 공부해볼까 말까 하던 리액트에 갑자기 꽃혀서 마구 뒤져보기시작했습니다.

 

하지만 아는거라곤 예전에 배운 학교에서 배운 HTML, CSS, JavaScript 등  배운 지식들을 접미 시켜볼려는데 가물가물하군요... 그래서 이번에 제대로 공부해보자! 싶어서 기초부터 잡아나갈려고 합니다.(공식 문서 순서대로 공부 할 예정)

 

React란?

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.

 

공식문서에는 위와 같이 설명되어있습니다.

 

리액트는 SPA(Single Page Application)으로서 하나의 HTML 페이지로 구성됩니다. SSR(Server Side Rendering)과는 다르게 하나의 페이지로 구성되어있고, 전체 페이지를 새로고침하는게 아니라 필요한 요소들만 업데이트함으로서 리소스 절약 및 페이지 렌더링 시간 차이도 존재하며 이는 사용자 경험에 영향을 미치게 됩니다.

 

하지만 장점만 존재할 수는 없겠죠?

 

• 초기 로딩 시간:
  • 첫 페이지 로딩 시 모든 자바스크립트 파일을 다운로드하고 실행해야 하므로 초기 로딩 시간이 길어질 수 있습니다.
• 검색 엔진 최적화(SEO) 문제:
  • SPA는 클라이언트 사이드에서 콘텐츠를 동적으로 로드하기 때문에 전통적인 SEO 방법으로는 검색 엔진에 제대로 인덱스되지 않을 수 있습니다. 이를 해결하기 위해 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG) 등의 기술을 사용할 수 있습니다.
• 자바스크립트 의존성:
  • 자바스크립트가 비활성화된 브라우저에서는 애플리케이션이 제대로 동작하지 않을 수 있습니다.

 

이러한 결과물이  최종적으로 웹 브라우저에서 실행되서 사용자에게 전달되는 과정까지도 알아보겠습니다.

1. 자바스크립트 코드 작성

const element = name => `Hello, Empty Storyboard!`;

 

 

2. Babel을 통한 트랜스파일링 (Transpiling)

트랜스파일링은 최신 자바스크립트 코드를 이전 버전의 자바스크립트로 변환하는 과정입니다.

1. 소스 코드 분석:
   • Babel은 소스 코드를 파싱하여 AST(Abstract Syntax Tree)로 변환합니다. AST는 코드의 구조를 나무 구조로 표현한 것입니다.
2. 코드 변환:
   • Babel은 AST를 기반으로 최신 문법을 이전 버전의 문법으로 변환합니다. 
   • 변환된 AST는 다시 코드로 변환됩니다.

     // 원본 ES6 코드
     const element = name => `Hello Empty Storyboard`;
     
     // ES5로 변환된 코드
     var element = function(name) {
       return 'Hello Empty Storyboard';
     };

 

3. 번들링

• 여러 자바스크립트 파일을 하나로 묶습니다.

4. 최적화

• 파일 크기를 줄이고, 성능을 개선합니다.

5. 배포

• 최종 파일을 웹 서버에 배포합니다.

6. 브라우저에서 실행

• 브라우저가 파일을 다운로드하고, 파싱 및 실행하여 사용자에게 결과를 제공합니다.

 

리액트를 공부하기전 약간의 배경지식을 공부해봤는데, 다음 글에서는 JSX에 대해 알아보겠습니다!