본문 바로가기
Developer/취준

면접대비 질문 정리: 리액트

by 청량리 물냉면 2024. 4. 30.
반응형

면접질문 참고

 

1. 리액트란?

✅ 답변

UI를 구축하기 위한 자바스크립트 라이브러리입니다.

프레임워크가 아니고 라이브러리라 다른 프레임워크에 간편하게 붙여서 사용가능합니다.

SPA이며 component를 기반으로 하여 모듈형으로 ui를 구성합니다.
컴포넌트 기반이라 생산성과 유지보수가 용이하며, virtual DOM으로 인해 앱의 효율성과 속도가 빠릅니다.

 

참고: https://manon-kim.tistory.com/entry/%EB%A9%B4%EC%A0%91%EC%A7%88%EB%AC%B8-%EC%A0%95%EB%A6%AC

 

 

2. 리액트를 사용한 이유?

✅ 답변

리액트는 컴포넌트 기반으로 UI를 구성할 수 있기 때문에 모듈화나 재사용성이 뛰어나고 따라서 개발 생산성 증대에도 도움을 줍니다. 

또한 가상 DOM을 사용해, 기존과 달라진 UI만 추적해서 실제 DOM에 반영하기 때문에 빠른 렌더링이 가능하다는 장점도 있습니다. 

마지막으로 리액트를 사용하는 유저가 많고 따라서 관련 커뮤니티도 활발하기 때문에 개발할 때 헷갈렸던 부분을 서치하기도 쉬웠고 다양한 라이브러리가 출시되어 있어 개발을 하는 데 있어 편리한 점이 많을 것 같아 리액트를 선택했습니다.

 

 

3. 프레임워크 vs 라이브러리

✅ 답변

라이브러리와 프레임워크의 제어 흐름에 대한 주도성이 개발자에게 있는가에 따라 구분됩니다.(즉, 애플리케이션의 Flow(흐름)을 누가 쥐고 있느냐에 달려있습니다.)

라이브러리와 달리 프레임워크는 그 스스로 제어 흐름의 주도성을 갖습니다. 또한 프레임워크는 이미 프로그래밍에 대한 규칙을 가지고 있습니다. 예를 들면 설정파일의 태그설정이나, DB연동 방법등에 대한 규칙을 가지고 있고 개발자는 이를 따라야 합니다.

반면, 라이브러리는 애플리케이션의 흐름을 개발자가 가지고 있고 프로그래밍에 있어서의 자유도가 높습니다.

 

참고: https://sharonprogress.tistory.com/169

 

 

4. 가상 돔(Virtual-DOM)

✅ 답변

가상 DOM은 실제 DOM의 가벼운 복사본이며, 리액트 요소의 상태 변경에 따른 UI 업데이트를 추적합니다. 상태 변경이 발생하면 리액트는 이전 가상 DOM과 현재 상태를 비교하여 변경된 부분을 식별합니다. 이를 위해 리액트는 diffing 알고리즘을 사용하는데, 이 알고리즘은 이전 가상 DOM과 현재 가상 DOM을 비교하여 변경된 부분을 효율적으로 찾아내고, 이를 최소한의 DOM 조작으로 반영합니다. 가상 DOM과 diffing 알고리즘을 통해 React는 성능을 최적화하고 빠른 렌더링을 제공합니다. 특히, 대규모 애플리케이션에서도 효과적으로 작동합니다.

 

5. state와 props의 차이

✅ 답변

state와 props는 둘 다 컴포넌트 내에서 사용할 수 있는 변수입니다. 

props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터입니다. props는 변경되지 않으며, 자식 컴포넌트에서 전달받은 데이터를 사용하여 렌더링합니다.

반면에 state는 현재 컴포넌트에서 생성하고, 변경될 수 있는 컴포넌트 내부 동적 데이터 입니다. state는 오직 state가 생성된 컴포넌트 내에서만 변경이 가능합니다. 

(state는 반드시 객체 형태로 생성 되거나 아니면 null (state를 정의하지 않음) 타입이여야만 합니다.)

 

 

6. 리액트 생명주기에 대해 아는 대로 설명

✅ 답변

React 컴포넌트에는 생명 주기(라이프사이클)가 존재합니다.

생명 주기는 생성(mounting) - 업데이트(updating) - 제거(unmounting) 단계로 구성되어 있고, 이때 사용되는 생명주기 함수는 클래스형 컴포넌트에서만 사용할 수 있습니다.함수형 컴포넌트에서는 Hook을 사용해 유사한 동작을 구현할 수 있습니다.

 

마운트에 대해 말씀드라지면, 마운트란 처음 DOM이 생성된 후 웹 브라우저 상에 컴포넌트가 나타나는 것을 의미합니다. 

업데이트는 리액트 컴포넌트에 변화가 생길 때마다 발생하며, props가 바뀌거나 state가 바뀔 때, 또는 부모 컴포넌트가 리렌더링될 때 발생합니다. 

마지막으로 언마운트는 컴포넌트가 DOM에서 제거되는 과정을 의미합니다. 마운트 시에 등록되었던 이벤트 및 타이머, 상태들이 제거됩니다. 

 

참고: 

 

 

7. 상태 관리 라이브러리 사용 경험, 리덕스가 아닌 다른 라이브러리를 사용해 본 경험이 있는지

✅ 답변

 

 

 

8. 라우팅이란

✅ 답변

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것을 라우팅이라 합니다. 리액트에는 라우팅 관련 기능이 없기 때문에 추가적인 라우팅 라이브러리를 설치해서 사용합니다. 대체로  React Router를 가장 많이 사용합니다.

npm install react-router-dom

 

 

 

메모이제이션에 대해 설명해주세요(*)

리액트가 등장하게 된 배경(이유)에 대해 설명해주세요(*)

component

Re-rendering

SPA란?

useEffect

 
 
반응형