💻 리액트 관련 면접 리스트

⭐ 리액트란?

리액트는 페이지 컴포넌트를 렌더링하고 빌드하는데 초점을 둔 자바스크립트 라이브러리 입니다.
UI 라이브러리이기 때문에 리액트 자체만으로 전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지 않습니다. 따라서, 앞선 기능들을 사용하려면 Redux, react-router, webpack(Vite) 등 추가 패키지를 설치해서 사용해야 합니다.
리액트 특징
- Virtual Dom을 사용해서 빠른 렌더링, 성능 개선이 가능합니다.
- 단방향 데이터 흐름을 갖습니다.
- 컴포넌트 기반 아키텍처를 채택하고 있습니다. 즉, 특정 기능을 수행하는 독립적인 단위인 컴포넌트를 이용해서 마치 작은 레고 블록으로 거대한 집을 만들 듯이 UI 구조를 만들어갑slek.
- JSX라는 자바스크립트와 XML을 조합한 확장 문법을 사용합니다. JSX를 사용하여 코드의 가독성이 높이며, 예측 가능한 개발을 가능하게 합니다.

⭐ JSX

JSX(JavaScript XML)는 JavaScript 문법에 XML을 추가한 확장 문법이다.
JSX는 브라우저에서 직접 사용할 수 없고, 브라우저에서 실행되기 전 Babel과 같은 트랜스 파일러를 사용하여 일반 자바스크립트 형태의 코드로 변환되어야 합니다.
장점
- 자바스크립트에서 HTML 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.
- JSX는 컴포넌트 기반 아키텍처를 권장한다. 이는 코드를 모듈화 하고 유지 보수를 하는데 도움이 된다. 이러한 특징은 리액트의 컴포넌트 기반 아키텍처와도 잘 통합되며 재사용 가능한 UI 구성 요소를 쉽게 만들 수 있다.
- JSX는 리액트뿐만 아니라 다른 라이브러리, 프레임워크에서도 지원합니다. 예를 들어 Vue, Solid 등의 라이브러리에서도 JSX가 채택되었으며, 다양한 영역에서 폭넓게 활용됩니다.
단점
- JSX 코드를 실행하려면 JS 코드로 컴파일되어야 합니다. 이를 위한 Bebel과 같은 개발 도구가 추가로 필요합니다.
- 일부 개발자들은 JSX가 HTML과 유사한 자바스크립트 코드에 결합함으로써 관심사를 혼합시키고, 표현과 논리를 분리하기 어렵게 만든다고 주장합니다.
- JSX는 인라인 표현식을 지원하지만 인라인 블록(”{}"안에 자바스크립트 표현식 사용)은 지원하지 않습니다. 즉, JSX 요소의 트리 내부에는 switch/if와 같은 블록은 가질 수 없습니다.
  - 예제

⭐ DOM과 브라우저 렌더링 과정

가상 DOM에 대해 다루기 앞서 DOM(Document Object Model)이란 무엇인지부터 살펴봐야 합니다.
DOM은 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있습니다.
DOM과 CSSOM으로 렌더링 트리가 만들어지는 과정(그림)

브라우저사 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드한다.
브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구성된 DOM 트리를 만든다.
2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.