React 기술면접 예상질문 미리보기 <7>
클래스형과 함수형의 차이, 라이프사이클 메소드, Lazy loading과 Code splitting 그리고 Server Side Rendering, Client Side Rendering, Static Site Generation에 관한 질문들. 뭐라고 답해야 할까?
Aug 23, 2024
리엑트(React)은 네이버, 카카오, 쿠팡, 무신사 등 국내 기업에서 많이 쓰이는 Java 기반 백엔드 개발 프레임워크죠. 현재 스프링 기술 면접 준비를 하고 계시다면 이번 아티클에 주목해주세요. 많이 물어보시는 스프링 기술 면접 질문을 추렸습니다. 예상 질문부터 수강생의 답변과 멘토님의 피드백까지 한눈에 확인해보세요.
Q (1). react 클래스형과 함수형의 차이를 설명해 주세요. 그리고 어떤 방식을 주로 사용하였고 그 이유가 뭔지 답변해 주세요.
핵심 키워드 : hooks, 라이프사이클 메서드, 가독성
수강생 답변
클래스형 컴포넌트는 React의 Component 클래스를 상속받아서 작성됩니다. 클래스형 컴포넌트는 기본적으로 라이프사이클 메서드를 사용해서 컴포넌트의 생명 주기를 관리할 수 있으며, 클래스 메서드 내에서 React 컴포넌트의 속성과 상태에 접근하기 위해 this 키워드를 사용합니다.
함수형 컴포넌트는 화살표 함수나 일반 함수로 작성됩니다. 함수형 컴포넌트는 useState, useEffect 등의 Hook을 사용하여 상태 관리, 라이프사이클 로직 등을 구현합니다. 이러한 함수형 컴포넌트는 클래스형에 비해 코드가 간결하며, this 키워드를 사용하지 않아 가독성이 좋습니다.
저는 함수형 컴포넌트를 주로 사용합니다. 이유는 this를 사용하지 않아도 된다는 장점이 있어서 코드를 작성할 때 가독성을 높일 수 있기 때문입니다. 또한 유용한 Hook을 쉽게 사용할 수 있기 때문에 코드를 더 효율적으로 작성할 수 있습니다. 혼자서 공부를 해보고, 팀 단위로 프로젝트를 진행하면서, 코드의 가독성과 효율적인 코드의 필요성을 점점 더 크게 느끼고 있기 때문에 저는 특별한 사유가 없는 한 함수형 컴포넌트를 계속 사용할 것 같습니다.
멘토님 피드백
클래스형과 함수형 컴포넌트의 차이점을 정확히 이해하고 있으며, 질문의 의도에 맞게 두 유형을 비교하여 적절하게 잘 설명한 답변입니다.
☑︎ 체크 포인트
1) 클래스형과 함수형 컴포넌트의 차이점을 명확하게 이해해서 서술한 점
- 정의 방식의 차이:
- 클래스형: "React의 Component 클래스를 상속받아서 작성됩니다."
- 함수형: "화살표 함수나 일반 함수로 작성됩니다."
- 생명주기 관리 방식의 차이:
- 클래스형: "라이프사이클 메서드를 사용해서 컴포넌트의 생명 주기를 관리할 수 있으며"
- 함수형: "useState, useEffect 등의 Hook을 사용하여 상태 관리, 라이프사이클 로직 등을 구현합니다."
- this 키워드 사용의 차이:
- 클래스형: "클래스 메서드 내에서 React 컴포넌트의 속성과 상태에 접근하기 위해 this 키워드를 사용합니다."
- 함수형: "this 키워드를 사용하지 않아 가독성이 좋습니다."
- 코드 간결성과 가독성의 차이:
- "클래스형에 비해 코드가 간결하며, this 키워드를 사용하지 않아 가독성이 좋습니다."
Q (2). 라이프사이클 메소드에 대해 설명해 주세요.
핵심 키워드 : componentDidMount, shouldComponentUpdate, componentDidCatch 등
수강생 답변
라이프 사이클이란 React 컴포넌트가 생명주기에 따라 다양한 단계를 거치는 것을 의미합니다. 각 단계에서 특정한 메서드를 실행할 수 있는데 이것을 바로 라이프사이클 메서드라고 부릅니다. 이를 통해 개발자는 컴포넌트가 화면에 나타나거나 사라지는 시점에 어떤 로직을 실행할지 정할 수 있습니다.
마운팅은 컴포넌트가 DOM에 처음 삽입될 때입니다. 'constructor'는 컴포넌트 생성, 초기 상태 할당입니다. 'componentDidMount'는 컴포넌트가 화면에 나타난 후 실행, 주로 AJAX 요청이나 DOM 조작 등을 합니다. 업데이팅은 컴포넌트의 상태나 속성(props)이 변경될 때입니다.
'shouldComponentUpdate'는 컴포넌트가 리렌더링할지 결정, 성능 최적화에 쓰입니다. 'componentDidUpdate'는 컴포넌트가 업데이트된 후 실행, 업데이트 로직 처리를 합니다. 언마운팅은 컴포넌트가 DOM에서 제거될 때입니다. 'componentWillUnmount'는 컴포넌트가 사라지기 전에 실행, 이벤트 리스너 제거 등의 정리 작업을 합니다.
멘토님 피드백
이 설명은 간단 명료하게 잘 정리되어 있어 면접 전 간단히 복습하기에 적합한 답변입니다.
Q (3). Lazy loading과 Code splitting에 대해 아는 만큼 설명해 주세요.
핵심 키워드 : 필요 시점, 로딩 시점, 성능 개선, 최적화
수강생 답변
lazy loading과 code splitting 모두 웹 성능 최적화를 위한 기술입니다.
먼저, lazy loading은 웹을 초기 로딩할 때 모든 리소스를 불러오지 않고 필요한 시점에 필요한 리소스를 동적으로 로딩하는 기술입니다. 특히 이미지, 폰트 등의 리소스들을 사용자가 스크롤하거나 특정 이벤트가 발생할 때 로딩하도록 합니다. 이를 통해 초기 로딩 속도를 향상시키고 사용자 경험을 개선할 수 있습니다.
코드 분할은 웹의 코드를 분할하여 필요한 시점에 로딩하는 것을 의미합니다. 대규모 웹에서는 모든 코드를 한 번에 다운로드하는 것이 초기 로딩 속도를 느리게 할 수 있기 때문에, 코드 분할은 이를 해결하기 위해 특정 라우트, 특정 컴포넌트 또는 기능에 필요한 코드만을 동적으로 로딩합니다. 리액트에선 주로 React.lazy와 Suspense를 사용하여 컴포넌트 단위로 코드 분할을 구현합니다.
이렇게 보면 똑같은 개념인 것 같지만, lazy loading은 주로 외부 리소스의 로딩을 최적화하고 code splitting은 애플리케이션의 자바스크립트 코드를 최적화하는 데 중점을 둔다는 점에서 차이가 있습니다. 따라서 전반적인 성능 향상을 위해선 두 가지 기술을 모두 사용하는 것이 일반적입니다.
멘토님 피드백
lazy loading과 code splitting의 기능적 정의와 특징을 명확히 설명하고 있으며, 각 기술의 적용 사례와 구현 방법을 간단한 예시를 들어 잘 설명하고 있습니다.
☑︎ 체크 포인트
1) 각 기술의 적용 방식을 간단한 예시를 들어 설명한 점
- Lazy loading
- "특히 이미지, 폰트 등의 리소스들을 사용자가 스크롤하거나 특정 이벤트가 발생할 때 로딩하도록 합니다."
- Code splitting
- "리액트에선 주로 React.lazy와 Suspense를 사용하여 컴포넌트 단위로 코드 분할을 구현합니다."
Q (4). Server Side Rendering, Client Side Rendering, Static Site Generation 의 장단점을 설명해 주세요.
핵심 키워드 : SEO, 초기 로딩, 캐싱
수강생 답변
SSR은 서버에서 페이지 전체 내용을 렌더링하여 클라이언트에게 HTML을 전송하는 렌더링 방법입니다. 이 방법의 첫 번째 장점은 자바스크립트 파일을 해석하지 않아도 되기 때문에 초기 페이지 로딩 속도가 빠르다는 점입니다. 두 번째는 크롤러가 완전히 렌더링된 페이지의 내용을 쉽게 파악할 수 있기 때문에 SEO에 유리한 점입니다. 단점으로는 각 요청마다 서버에서 렌더링을 수행해야 하므로 부하가 증가할 수 있다는 점입니다.
CSR은 브라우저에서 자바스크립트를 사용하여 페이지를 렌더링하는 방법입니다. 이 방법의 장점은 첫 번째로 서버에서 정적 파일만 제공하기 때문에 서버 부하가 비교적 적다는 점입니다. 두 번째는 한 번 초기 로딩이 완료되면 페이지 전환 시 추가적인 렌더링만 수행하기 때문에 페이지 전환이 빠르다는 점입니다. 단점으로는 자바스크립트 파일을 다운로드하고 실행하여 페이지를 렌더링해야 하므로 초기 로딩이 느리다는 점입니다. 또한 자바스크립트를 완전히 실행하지 않을 경우, 검색 엔진 크롤러가 페이지 내용을 제대로 인식하지 못하기 때문에 SEO 문제가 발생할 수 있다는 점입니다.
SSG(Static Site Generation)는 빌드 시점에 모든 페이지를 미리 렌더링하여 정적 파일로 생성하는 방법을 말합니다. 이 방법의 장점은 서버에서 동적으로 콘텐츠를 생성하지 않기 때문에 보안상 이점이 있을 수 있다는 점이며, 추가로 SSR과 CSR의 장점을 모두 가지고 있습니다. 단점으로는 사이트의 크기나 복잡도가 증가하면 빌드 시간이 길어질 수 있다는 점입니다.
멘토님 피드백
SSR, CSR, SSG 세 가지 렌더링 방식의 핵심 특징과 각각의 장단점을 명확하게 비교하여 설명하고 있는 답변입니다.
리엑트(React) 기술 면접 질문, 도움이 되셨나요? 기술면접 대비는 현직 개발자의 시선에서 어떤 답변이 좋을 지를 파악할 수 있어서 취업 리부트 코스 수강생들의 만족도가 가장 높은 세션 중 하나 인데요. 앞으로도 React, Spring의 기술면접 Q&A를 꾸준히 발행할 예정이니, 관심이 있다면 항해99 블로그를 구독해주세요.
🚢 개발자 취업 준비 어떻게 시작해야 할지 모르겠나요? 취업으로 향하는 거친 항해에서 든든한 메이트가 되어 드리겠습니다.
취업 실패 시 교육비 0원. 반드시 취업까지 책임질 수 있다는 항해의 자신감입니다.
높은 수준의 개인 프로젝트 경험이 없는 개발 유관 전공자, 전반적인 학습이 부족한 부트캠프 수료생이라면 개발자 취업 리부트 코스에 합류하세요. 자료구조 공부, 프로젝트, 코테준비, 이력서와 면접 대비까지 취업 리부트 코스에서 한 번에 할 수 있습니다. 갈수록 높아지는 개발자 취업의 벽, 개발자 취업 리부트 코스로 11주 만에 취업의 문을 열어 보세요
CREDIT
글 | 송민영 팀스파르타 에디터
Share article
Subscribe to our newsletter