[FE 면접질문] React (1)

React

React는 라이브러리인가요 프레임워크인가요?

• 공식문서에서도, 리액트는 View에 관련된 기능 개발을 위한 라이브러리라고 소개하고 있다.
• 리액트를 사용할 때, 라우팅이나 상태관리와 같은 개발에 필요한 여러 기능들은 서드파티 라이브러리에 의존해야 한다.
• 따라서 리액트는 개발을 위한 자바스크립트 라이브러리라고 생각한다.

라이브러리와 프레임워크의 차이를 알고 있나요?

• 라이브러리는 특정 기능 개발을 도와주는 도구들을 모아놓은 개념이고, 프레임워크는 프로그램을 개발하기 위한 구조를 제공하는 개념이다.
• 따라서 프레임워크를 사용하면 개발에 대한 전체적인 기능을 제공하고, 프로그램 제어 흐름을 프레임워크에서 관리하는 차이점이 있다.

리액트의 특징을 설명해주세요. (리액트를 사용한 이유)

• 리액트는 단방향 데이터 플로우를 가지고 있다. 부모에서 자식 컴포넌트로 props를 전달하는 방식으로 작동한다.
• 리액트는 가장 많은 사용자가 사용하는 라이브러리로, 생태계가 넓어서 많은 문서와 라이브러리가 존재한다.
• 리액트는 컴포넌트라는 단위로 개발을 진행한다. 독립적인 컴포넌트 단위로 나눠서 개발하고 관리하기 때문에 유지보수가 용이한다. 그리고 반복되는 기능을 컴포넌트를 재사용하여 해결할 수 있다.
• 그리고 가상 돔(Virtual DOM)을 사용한다. 리액트를 사용하면 메모리상에 가상의 돔 오브젝트를 생성하고 관리한다. 가상 돔을 통해 뷰 변경사항을 확인하고 실제 돔에 업데이트 하는 기능을 리액트가 담당한다.
• 가상돔에서 변경 사항을 비교하는 과정을 통해 돔 업데이트 횟수를 최적화하여 렌더링 속도를 어느정도 최적화 할 수 있다.
• 그 외에도 SPA 개발을 용이하게 하고, 리액트 네이티브라는 모바일 어플리케이션 프레임워크를 통해 네이티브 플랫폼 개발로 확장할 수 있다.

Suspense

• Suspense는 리액트에서 컴포넌트가 렌더링하기 전에 다른 작업이 진행되는 것을 대기하는 방식이다.
• 컴포넌트에서 사용할 데이터가 준비되지 않았다는 걸 리액트에게 알리고, 준비하는 동안 보여줄 컴포넌트를 설정할 수 있다.
• Suspense를 사용하면 데이터 페칭과 로딩 상황, 에러 상황의 처리 등을 선언적으로 처리할 수 있다.
• 그리고 Suspense가 중첩되어도 순서 등에 상관없이 병렬적으로 데이터를 페칭할 수 있다.

 

JSX (JavaScript XML)

JSX 를 알고있나요?

• JSX는 자바스크립트 XML라는 의미로, 자바스크립트 문법을 확장한 문법이다.
• 리액트에서는 JSX 문법으로 작성된 코드를 해석하고 실행할 때 React Element 로 변환해서 사용하고 있다.

리액트에서 JSX 를 사용하면 어떤 장점이 있나요?

• HTML 문법을 알고 있다면 UI 작업 시 더 직관적으로 코드를 이해할 수 있다.
• 그리고 리액트는 마크업 파일과 여러가지 로직을 담고있는 파일을 분리하지 않고 컴포넌트라는 하나의 파일에 코드를 작성한다. 그래서 높은 응집도의 코드를 작성할 수 있다.
• 마지막으로 느슨한 연결을 통해 관심사의 분리가 가능한다.
  JSX 문법으로 표현한 UI 부분과, 상태를 변경하거나 하는 렌더링 로직을 분리해서 작성할 수 있다.

리액트에서 JSX 가 어떻게 작동하나요?

• 리액트에서 JSX는 리액트 라이브러리의 createElement를 Syntax Sugar 한 개념이다.
  (Syntax Sugar란 프로그래밍 언어에서 구문상의 간소화된 문법을 뜻한다.)
• JSX 문법이 적용된 코드는 babel 을 통해 React.createElement 라는 함수 호출로 변경된다.

React 가 직접 호출되지 않는데 import React 를 해야 하는 이유를 알고 있나요?

• 리액트 17 이전에는 JSX 문법으로 작성된 코드를 babel을 통해 React.createElement라는 함수 호출로 변경했다.
• 그래서 JSX 로 작성된 코드에서는 보이지 않지만 실제로 실행할 때에는 React가 import 되어야한다.
• 하지만 리액트 17버전 이후부터는 babel에서 빌드 시점에 따로 처리해 주기 때문에 import 할 필요가 없게 되었다.

그 많던 import React from ‘react’는 어디로 갔을까

리액트에서 JSX 사용 시 주의해야 할 점이 있을까요?

• 컴포넌트를 JSX 문법으로 호출할 때, 컴포넌트 이름은 반드시 대문자로 시작해야한다.
• 소문자로 시작하는 Element는 내장 컴포넌트로 인식한다. 내장 컴포넌트는 createElement 에서 div나 span 같은 문자열 형태로 전달하고 처리하기 때문에 문제가 발생한다.
• HTML에서 Element의 속성으로 class 속성을 많이 사용하는데, JSX도 자바스크립트 문법을 확장한 문법이기 때문에 class 라는 키워드를 사용할 수 없다. 대신에 className 이라는 속성을 사용한다. (추가적으로 몇몇 속성들도 camelCase 를 사용해야 한다.)

 

가상 돔 (Virtual DOM)

리액트는 어떻게 화면을 변경하나요?

• 리액트는 Virtual DOM이라는 개념을 통해 UI를 관리하고 실제 DOM과 동기화해서 화면을 변경한다.
• 변경사항들을 메모리 상의 Virtual DOM 에 먼저 적용하고, 바뀐 부분만 실제 DOM에 적용한다.

가상 돔을 사용하는 이유가 있을까요?

• 자바스크립트 코드를 통해 화면을 나타내는 DOM을 수정하면 렌더링 과정 중 레이아웃이나 페인트 과정이 다시 발생하게 된다. 이 과정을 리플로우와 리페인트라고 한다.
• 반응형 웹에서 이런 과정이 많이 발생해서 특히 리플로우 과정은 브라우저 성능을 떨어트리는 주요 원인이 된다.
• 그래서 리액트는 Virtual DOM에 변경 사항을 적용하고, 실제로 변경된 부분을 계산해서 DOM에 일괄로 적용하는 Batch Update를 적용해서 성능을 최적화 했다.
• 그리고 개발자는 선언적으로 코드를 작성할 수 있다. 어떤 부분을 어떻게 실제 DOM 에 적용하는지와 같은 과정을 Virtual DOM 에게 위임할 수 있다.

리액트에서 가상 돔 작동 방식을 설명해주세요.

• 리액트는 재조정이라는 과정을 통해 Virtual DOM을 이용해서 실제 DOM을 조작한다.
• 리액트는 항상 두개의 Virtual DOM을 가지고 있다. 하나는 업데이트를 위한 Virtual DOM, 다른 하나는 업데이트가 되지 않은 Virtual DOM다.
• 일정 시간동안 컴포넌트의 상태가 변경되면 변경사항을 업데이트를 위한 Virtual DOM 트리에 적용한다.
  (참고)Virtual DOM 에 변경사항을 적용하는 부분은 오래 걸리지 않는다.
• 그리고 시간이 지나면 업데이트 된 Virtual DOM과 업데이트 전의 Virtual DOM을 diffing 알고리즘을 사용해서 비교한다.
• diffing 알고리즘의 결과로 실제로 변경된 부분을 알 수 있고 그 부분을 일괄적으로 실제 DOM에 적용한다.
• 이렇게 Virtual DOM을 사용해 여러개의 상태 변경을 일괄적으로 실제 DOM에 적용하는 것을 Batch Update라고 한다.

리액트에서는 가상 돔의 변경점을 어떻게 알아내나요? (diffing 알고리즘)

• 리액트는 두개의 가상돔을 가지고 있고, 업데이트 된 가상돔과 업데이트 전 가상돔을 비교해서 변경사항을 찾고 있다.
• 모든 DOM 트리를 비교하는 알고리즘은 O(n^3)시간이 들어서 리액트에서는 특정 조건에서 휴리스틱한 O(n)알고리즘을 사용한다.
• 첫번째 조건은 타입이 다른 Element는 다른 트리를 만든다는 가정이고, 두번째 조건은 개발자가 key라는 Props를 통해 트리의 변경 사항을 알려준다는 가정이다.
• 비교 과정에서 각 Virtual DOM 트리의 루트부터 비교를 시작한다.
• 다른 Element로 변경됐을 경우 : 해당 서브트리를 제거하고 새로운 서브트리를 적용한다.
• 같은 Element일 경우 : className이나 다른 props들을 비교하여 변경사항만 적용한다.
• 이 과정을 재귀적으로 하위 Element에 대해 반복한다.

fiber (파이버) 란 무엇인가요?

• fiber는 리액트 가상 돔 변경 과정에서 발생하는 동시성, 애니메이션과 같은 문제점들을 해결하기 위해 적용한 알고리즘이다.

컴포넌트의 key 에 대해 설명해주세요.

• key는 리액트에서 Element의 고유성을 부여하기 위한 값으로, 리액트에서 Element를 식별하고 변경하거나 제거할 때 사용한다.
• 그래서 Element 리스트를 표현할 때에는 각 Element마다 항목을 고유하게 식별할 수 있는 id를 key로 전달하게 된다.
• 이렇게 전달된 key는 리액트에서 변경을 감지할 때 사용한다.
• key가 없을 경우, 자식 Element 를 비교할 때 하나라도 다르면 트리를 다시 구성해서 나쁜 성능을 보인다.
• 하지만 key가 있을 경우 key를 기준으로 추가되거나 삭제된 Element를 식별하고 이를 기반으로 갱신한다.
  (따라서 변경될 수 있는 index와 같은 값을 key로 사용하는 것 보다는 고유한 id를 사용해야 하는 것이 좋다.)

 

렌더링(SPA, CSR, SSR 등)

SPA 에 대해 설명해주세요.

• SPA는 Single Page Application의 약자로, 하나의 페이지로 이루어진 어플리케이션이라는 의미다.
• 전통적인 멀티 페이지 어플리케이션 방식은 페이지가 변경될 때 마다 서버에서 새로운 HTML 파일을 응답받아서 표시하는 방식을 사용했다.
• SPA는 전통적인 웹 애플리케이션과 달리 새로운 페이지를 서버로부터 로드하지 않고 클라이언트 측에서 자바스크립트를 사용하여 동적으로 콘텐츠를 업데이트한다.
• AJAX 통신을 통해서 전체 페이지가 아닌 필요한 데이터에 대해서만 서버 API 호출을 통해서 받아오고, 페이지 새로고침 없이 뷰를 수정할 수 있게 되었다.

SPA 특징과 장점을 설명해주세요.

• 주로 SPA은 CSR(클라이언트 사이드 렌더링) 방식을 사용한다.
• 처음 요청에 따라서 서버에서 HTML파일과 함께 렌더링에 필요한 자바스크립트, CSS 파일을 받아온다. HTML파일을 받아오고 나서 자바스크립트를 통해 DOM을 수정하는 방식으로 작동한다.
• 따라서 첫 페이지 로딩 이후에는 전체 페이지가 아닌 변경이 필요한 부분의 데이터만 서버와 통신하여 업데이트한다.
• 로딩 이후에는 전체적인 트래픽을 줄일 수 있고, 인터렉티브한 사용자 경험을 제공할 수 있다.
• 부분적으로 업데이트 하는 방식이기 때문에 컴포넌트 개발 방식과 잘 맞는다.

SPA 단점을 설명해주세요.

• SPA는 초기 로딩 시에 렌더링 로직을 포함한 모든 리소스를 다운로드해야 하므로, 초기 로딩 시간이 오래 걸릴 수 있다.
• 검색엔진 최적화(SEO) 이슈가 발생할 수 있다. 일반적으로 SPA은 CSR(클라이언트 사이드 렌더링) 방식을 사용하는 경우가 많기 때문에 구글 크롤러 봇처럼 자바스크립트를 실행할 수 있는 봇이 아니라면 렌더링되지 않은 비어있는 HTML을 크롤링 하는 문제가 발생할 수 있다.

SEO(검색엔진최적화) 가 뭔가요?

• 구글과 같은 사이트의 검색 엔진들이 서버에 등록된 사이트를 돌아다니면서 문서를 분석한다. 분석한 데이터로 검색 결과를 표시하게 되는데, 이때 콘텐츠에 포함된 정보를 검색엔진이 잘 수집할 수 있도록 하는게 검색엔진 최적화이다.

CSR(클라이언트 사이드 렌더링)에서 검색엔진 최적화 이슈가 발생하는 이유가 있나요?

• CSR(클라이언트 사이드 렌더링)으로 작성된 사이트들은 일반적으로 처음 접속하면 body가 비어있는 HTML파일을 받아오고, 자바스크립트를 통해 동적으로 콘텐츠를 렌더링한다.
• 검색엔진의 봇은 사이트를 돌아다니면서 HTML문서 정보를 수집하는데, SPA에서는 body가 비어있는 HTML문서를 수집하게 된다.
• 구글의 봇은 자바스크립트를 실행하여 수집할 수 있지만, 대부분의 봇들은 SPA의 비어있는 문서를 수집하기 때문에 SEO(검색엔진최적화)가 잘 되지 않는다.

검색엔진 최적화를 할 수 있는 방법을 설명해주세요.

• SSR(서버 사이드 렌더링)을 적용하는 방법이 있다. SSR(서버 사이드 렌더링)은 서버에서 HTML문서를 만들어서 응답하기 때문에 사용자도, 검색엔진도 완성된 HTML 파일을 응답받기 때문이다.
• CSR(클라이언트 사이드 렌더링)을 사용해야한다면 사전 렌더링 방식을 적용할 수 있다. 검색 엔진이 빈 HTML파일 대신 내용이 포함된 HTML을 가져갈 수 있도록 빌드타임에 데이터가 포함된 HTML파일을 생성하는 방식을 사용할 수 있다.
• 따라서 제목이나 head의 meta 태그 등 HTML 파일에 문서 정보를 잘 나타낼 수 있도록 설정해야 한다.

TTV, TTI를 알고 있나요? (Time-to-View, Time-to-Interect)

• TTV는 Time to View의 약자로 콘텐츠가 화면에 보여지는 시점을 의미한다.
• TTI는 Time to Interect의 약자로 사용자와 상호작용이 가능한 시점을 의미한다.
• CSR(클라이언트 사이드 렌더링)을 사용하면 TTV와 TTI가 동일하다. 서버에서 빈 HTML 파일을 받아오고, 자바스크립트 파일도 모두 가져온 이후에 렌더링하기 때문에 보이는 시점과 상호작용 하는 시점이 동일한 것이다.
• SSR(서버 사이드 렌더링)을 사용하면 TTV가 TTI보다 더 빠르다. 서버에서 완성된 HTML 파일을 받아오면 콘텐츠가 화면에 먼저 보이고, 그 후 서버에 인터렉션을 위한 자바스크립트를 요청하게 되고 서버로 부터 응답 받게 되면 그때부터 실제로 상호작용이 가능한다.
  (TTV와 TTI의 차이가 크다면 그만큼 콘텐츠는 보이지만 버튼 클릭같은 상호작용이 불가능한 시간이 길어진다는 뜻이다.)

---

Reference

시리즈 | 💬 개발자 면접 - shyuuuuni.log