면접 예상 질문을 통한 React 기본 개념 정리

개요. 

React란 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리이다. React는 컴포넌트 기반 아키텍처를 채택하고 있다. 컴포넌트는 재사용이 가능 UI의 독립적인 단위로, 각 컴포넌트는 고유한 상태와 렌더링 로직을 가진다. 쉽게 말해 각 컴포넌트는 state 통해 UI의 상태를 관리하고, JSX를 통해 화면에 표시할 내용을 정의한다. (JSX는 자바스크립트 내에 HTML과 유사한 문법을 사용할 수 있게 합니다.)

 

특징.

Q. Virtual Dom이란?
Virtual DOM 을 생성하여 상태 변경이 되었을 때, 변경된 부분만 변경

 

Q. React의 내부 작동원리를 Reconciliation(재조정)으로 설명하면?  

  1. Virtual DOM이 초기 렌더링 된다. 

  2. 상태 변경이 일어난다. 

  3. 새로운 Virtual DOM을 생성한다. 

  4. 기존과 신규 Virtual DOM을 비교하여 변경점을 찾는다. 

  5. 변경점을 실제 DOM에 반영한다. 

 

Q. React의 Rendering 방식은? 

- React는 기본적으로 CSR(Client Side Rendering) 이나, Next.js와 같은 프레임워크를 통해 SSR(Server Side Rendering)도 가능하다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

* 참조

- DOM은 HTML을 객체 모델로 표현한 것이다. 객체 모델로 표현한 이유는 Javascript와 같은 언어로 프로그래밍적으로 접근할 수 있게 하기 위함이다.  

- CSR은 브라우저에서 Javascript를 실행하여 UI를 렌더링한다. SSR은 서버에서 React 컴포넌트를 렌더링하여 완성된 HTML을 클라이언트로 전달한다.