3/5 취준 기록 - 2일차

기술 면접 질문 리스트

 

1. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요.
2. useRef에 대해 설명해주세요.
3. useEffect의 실행 순서에 대해 설명해주세요

---

1.  버츄얼 돔과 리얼 돔의 차이를 설명해주세요.

답변: 가상 돔은 브라우저의 실제 돔을 추상화한 것으로 자바스크립트 객체 형태로 메모리상에 저장됩니다. 리액트에서 상태 변화로 인해 렌더링이 발생하면 이전에 생성된 가상 돔과 렌더링 이후에 생성된 가상 돔을 비교 연산(Diffing)하여 실제 변경된 노드만을 실제 돔으로 한 번에 배치(batch) 업데이트 합니다. 이러한 과정을 재조정(reconciliation)이라 하며 reflow와 repaint과정은 브라우저의 성능을 저하시키는 가장 큰 원인으로 배치 업데이트를 통해 화면에 보여줄 컨텐츠를 한 번에 적용하므로 성능 최적화에 유리합니다.

2. useRef에 대해 설명해주세요.

답변: useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React 훅입니다. useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook으로 값(current)이 바뀌어도 리렌더링을 트리거하지 않으며, 컴포넌트가 언마운트될 때까지 동일한 객체가 유지됩니다. 이러한 특성으로 인해 DOM을 직접 참조하는 경우에 유용합니다. ref는 일반 JS객체(참조형 데이터)이기 때문에 React는 사용자가 언제 변경했는지 알지 못하므로 화면에 표시되는 정보를 저장할 경우에는 state를 사용해야 합니다.

3. useEffect의 실행 순서에 대해 설명해주세요.

답변: useEffect는 컴포넌트가 화면에 첫 렌더링 되었을 때, 리렌더링 될 때, 화면에서 사라질 때 실행되며 각각의 단계를 mount, update, unmount라고 합니다. effect는 첫번째 인자로 콜백 함수, 두번째 인자로 의존성 배열을 전달 받습니다. 의존성 배열 전달을 생략하면 렌더링 될 때 마다 콜백 함수가 실행되고 빈 배열은 마운트 될 때 딱 한 번만 실행되며, 요소가 있을 경우 요소값의 변화가 발생 할 때 마다 실행됩니다. 콜백 함수는 함수를 반환하는데, 이를 클린업(clean up) 함수라고 하며  컴포넌트가 언마운트 될 때, 의존성의 변화로 인해 다시 불려지기 이전에 클린업이 실행됩니다. 클린업 함수는 주로 메모리 누수를 방지하기 위해 등록한
타이머 또는 이벤트리스너 등의 정리 작업을 수행합니다