[면접대비] React 뽀개기(1)👊

 

안녕하세요 :)

22-23 GDSC Ajou Member 이채민이라고 합니다.

 

고학년이시라면 현재 아주대학교에서 2023 하계방학 현장실습 신청을 받고 있다는 사실, 다들 아실텐데요!

웹 프론트엔드 개발직에 지원하신 분들을 위해 조금이나마 도움이 되고자 React 프레임워크와 관련된 면접 대비 질문을 정리하며 함께 공유하려고 합니다.

 

저도 아직 배우는 단계이기에 부족한 부분이 있겠지만, 지나가며 한번 정리하는 용도로 봐주시면 좋을 것 같습니다.

 

 

---

1) 리액트가 많이 사용되고 있는 이유는?

우선, React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. React는 유저의 인터랙션에 따라 페이지 구성을 달리 해주는 개념인 동적 페이지의 UI를 효율적으로 유지보수하고 관리할 수 있다는 장점이 있습니다. 또한 재사용성과 개발 생산성이 높기에 현재에도 글로벌 IT 기업을 포함한 여러 기업에서 대중적으로 사용되고 있는 프레임워크입니다. 컴포넌트 단위로 개발되어 빠르고 효율적이게 화면을 구성할 수 있을뿐만 아니라, JSX가 지원되기 때문에 훨씬 편리한 장점이 있어 리액트가 많이 사용되고 있습니다.

 

2) 컴포넌트 기반 아키텍처가 의미하는 것은?

우선 컴포넌트란, 프로그래밍의 한 부분으로 재사용 가능한 최소 단위를 말합니다. 이러한 컴포넌트 기반 시스템이 구축되면, 각각의 개별적인 구성 요소 및 블록들은 재사용이 가능하며 서로 독립적으로 존재한다. 즉 구성 요소 간 서로 의존하지 않으며 애플리케이션의 UI 개발이 용이해진다.

 

3) 리액트의 내부 작동 원리는?

React는 Virtual DOM을 활용해 실제 DOM에 접근하여 조작하는 대신에 이를 추상화한 JavaScript 객체를 구성하여 사용합니다. 변경 사항이 발생할 때마다 새로 생성된 Virtual DOM과 이전에 저장된 Virtual DOM을 비교하여 변경된 부분의 DOM만을 변경합니다. 이 과정을 재조정이라고 하는데, 결과적으로 내부의 Virtual DOM을 활용하는 재조정 과정을 통해 DOM이 업데이트되는 방식을 사용합니다. 변경된 부분만을 업데이트하기 때문에 효율적으로 DOM을 업데이트시킬 수 있다는 장점이 있습니다.

 

4) DOM과 Virtual DOM의 차이는?

DOM은 Document Object Model로 웹페이지가 브라우저 안의 화면에 나타나고, 이벤트에 반응하며 값을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태를 의미한다. 브라우저의 렌더링 엔진이 응답받은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성하는 방식입니다. 하지만 이 DOM 방식은 DOM 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 단점이 있습니다.
반면에 Virtual DOM은 가상의 DOM 트리로, HTML 정보를 저장하고 있다가, 이 트리에 변경이 발생하면 모든 변화를 쌓아놓은 뒤 단 한번 브라우저를 호출하여 화면을 갱신하는 방법을 사용합니다. 따라서 이러한 가상 DOM 방식은 여러 변화들을 하나로 묶어서 한번에 실제 DOM에 전달하기 때문에 연산 횟수가 줄어들고 전체적인 프로세스에 드는 비용이 비교적 적다는 장점이 있습니다.

 

5) Virtual DOM과 관련하여 Reconciliation에 대해 설명해라.

앞서 말했듯이 상태 변화가 있을 때 새로운 Virtual DOM을 생성하게 됩니다. 이후 현재 DOM과 비교한 뒤 차이가 있는 곳을 감지하여 실제 DOM에 적용시켜주는 과정입니다. 리액트는 두 가지 가정을 기반으로 O(n) 복잡도의 휴리스틱 알고리즘을 구현할 수 있습니다. 먼저 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다는 가정과, key prop을 통한 엘리먼트 변경 여부를 표시할 수 있다는 가정이 존재합니다. 

 

6) 클래스형 컴포넌트와 함수형 컴포넌트의 차이점에 대해 설명해라.

우선 두 방식 모두 선언 방법이 다릅니다. 클래스형 컴포넌트는 class 키워드가 필요하며 Component를 상속받아야 합니다. 하지만 함수형 컴포넌트는 함수 자체가 렌더 함수이기 때문에 render() 메소드를 사용하지 않아도 되고, Component 또한 상속받지 않아도 됩니다.
그리고 클래스형 컴포넌트는 여러 단계의 상속으로 인해 복잡성과 오류 가능성을 증가시키는 문제가 있습니다. 하지만 함수형 컴포넌트는 빌드 결과물의 크기가 상대적으로 작기 때문에 메모리 리소스를 클래스형 컴포넌트보다 덜 사용한다는 장점이 있습니다. 또한 클래스형 컴포넌트는 생성자 안에서 this.state형태로 초기 값이 설정 가능한 반면, 함수형 컴포넌트는 useState 함수를 사용함으로써 state를 사용합니다. 

 

7) CSR과 SSR에 대해 설명해라.

클라이언트 사이드 렌더링은 쉽게 말해 클라이언트에서 모두 처리한다고 볼 수 있습니다. 서버에서 전체 페이지를 한번 렌더링하여 보여주고, 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링하는 방식입니다. 클라이언트는 사용자의 action에 따라 필요한 부분만 다시 읽어 들이기 때문에 빠른 화면 전환이나 인터랙션이 가능하다는 장점이 있습니다. 또한 서버 부하가 줄고 페이지 이동 측면에서 부드러운 UX를 제공할 수 있습니다. 하지만 사용자가 첫 화면을 보기까지의 시간이 오래 걸리며, 크롤링할 때 아무 내용이 없기 때문에 SEO에 취약하다는 단점이 있습니다. 

서버 사이드 렌더링은 요청할 때마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식입니다. 브라우저에서 보는 파일을 올리는 게 아닌, 브라우저에서 보는 파일을 만들어 낼 수 있는 '로직'을 포함한 파일을 서버에 올려서 해당 파일을 만들어내는 형태입니다. 이는 DOM이 다 구성된 파일을 브라우저가 받기 때문에 초기 구동 속도가 매우 빠르다는 장점이 있습니다. 이처럼 페이지 로딩이 빠르고 CSR과 다르게 모든 컨텐츠가 HTML에 담겨있기 때문에 효율적인 SEO가 가능합니다.

 

8) state와 props의 차이는?

리액트에서 state는 컴포넌트의 상태를 뜻하며, props와 달리 변할 수 있는 값입니다. 하나의 컴포넌트의 내부에서 선언되기 때문에 이러한 state는 외부에 공개하지 않고 컴포넌트가 스스로 관리합니다. 반면에 props는 변할 수 없는 값을 말합니다. 컴포넌트는 상속하는 부모 컴포넌트로부터 props를 받고, 이 props 자체는 상속받는 컴포넌트 내에서 수정이 불가능하다는 특징이 있습니다. 
state와 props 모두 렌더링 결과물에 영향을 주는 정보를 갖고있지만, props는 함수의 매개변수처럼 전달되는 반면 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리됩니다.

 

9) prop drilling에 대해 설명해라.

prop drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 사용되는 컴포넌트를 거치면서 리액트 컴포넌트 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다. 만약 prop 전달이 많아지게 되면 코드를 읽을 때 해당 prop을 추적하기 힘들어지기 때문에 유지보수 측면에서 어려움을 직면할 수 있습니다. 따라서 과도한 prop drilling을 피하기 위해서는 redux나 recoil과 같은 전역 상태관리 라이브러리를 사용하는 방법을 사용할 수 있습니다.

 

10) 리액트의 생명주기에 대해 설명해라.

우선 리액트의 생명주기는 총 3가지, Mount, Update, Unmount  과정으로 나눌 수 있는데, 각각의 과정들은 컴포넌트가 생성되고, 사용되고, 소멸되기까지의 과정을 말합니다. Mount는 DOM이 생성되고 웹 브라우저상에 나타나는 것을 말합니다. 준비된 UI를 render 함수가 렌더링하며 componentDidMount 메소드를 통해 컴포넌트가 웹 브라우저상에 나타난 후 호출하게 됩니다.
그리고 Update 과정은 대개 4가지 경우에 발생하는데, props가 바뀌거나 혹은 state가 바뀌거나, 혹은 부모 컴포넌트가 리렌더링될 때 업데이트됩니다. 또 this.forceUpdate로 강제로 렌더링 트리거할 때 업데이트가 일어납니다.
Unmount 과정은 Mount의 반대 과정으로, 컴포넌트를 DOM에서 제거하는 것을 말합니다. 이 과정에서는 componentWillUnmount 메소드가 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출됩니다.