3/14 취준 기록 - 8일차

기술 면접 질문 리스트

1. VanillaJS와 비교하여 리액트를 사용하는 이유에 대해 설명해주실 수 있을까요?
2. 상태의 불변성이 중요한 이유가 무엇인가요?
3. 라이프사이클이 의미하는 바에 대해서 설명해주세요.

---

1. VanillaJS와 비교하여 리액트를 사용하는 이유에 대해 설명해주실 수 있을까요?

답변:
바닐라 자바스크립트는 DOM 요소의 생성, 추가, 삭제등의 조작과 상태 변화등을 개발자가 명령형으로 제어하는 반면, 리액트는 React에게 UI를 어떻게 표현해야 할 지 알려주는 선언적 API를 제공해 UI 작성의 편리함을 제공합니다.

예를 들어, DOM의 잦은 변경은 리플로우, 리페인트의 발생으로 브라우저가 많은 연산을 수행하게 되어 웹 성능 저하의 원인이 됩니다. 
React는 메모리에 저장되는 실제 돔을 추상화한 가상 돔을 통해 변경이 발생한 부분만을 감지하여 딱 한 번만 실제 돔에 반영합니다. 이를 통해 불필요한 리렌더링을 최소화하고 성능 최적화가 가능합니다.

그리고, 컴포넌트 단위로 코드를 작성해 UI를 구성합니다. 이는 반복적인 코드 작성을 줄여주며 컴포넌트 재사용성과 생산성을 증가시킵니다. 또한 에러 발생시 해당 컴포넌트의 로직만을 수정하여 디버깅에 유리합니다.

리액트는 JSX 구문을 사용하는데 이는 자바스크립트를 확장한 문법으로 컴포넌트 내부에서 HTML과 같은 마크업을 작성할 수 있어 간결한 코드와 가독성을 제공합니다.

2. 상태의 불변성이 중요한 이유가 무엇인가요?

답변:
리액트는 상태 업데이트를 수행할 때 메모리 주소 참조를 비교합니다. 추가적으로 설명하자면 객체의 속성을 일일이 비교하는 것이 아닌 객체의 참조값만을 통한 얕은 비교를 수행하기 때문에 새로운 참조형 데이터를 생성해 얕은 비교를 수행합니다.

1. 효율적인 상태업데이트 (얕은 비교 수행)
얕은 비교란 객체의 프로퍼티를 하나하나 다 비교하지 않고, 객체의 참조 주소값만 변경되었는지 확인합니다. 얕은 비교는 계산 리소스를 줄여주기 때문에 리액트는 효율적으로 상태를 업데이트 할 수 있습니다.
 
2. 사이드 이펙트 방지 및 프로그래밍 구조의 단순성.
원시타입은 애시당초 불변성 특징을 가지고 있지만 참조타입인 객체나 배열의 경우 값을 변경할 때 원본데이터가 변경될 여지가 있습니다. 이렇게 원본 데이터가 변경될 경우, 이 원본데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있습니다. 따라서 불변성을 지켜주면 사이드 이펙트를 방지하고 프로그래밍의 구조를 단순하게 유지할 수 있습니다.

3. 라이프사이클이 의미하는 바에 대해서 설명해주세요.

답변:
리액트는 컴포넌트 단위의 view를 중심으로 동작하는 UI 라이브러리입니다. 때문에 각 컴포넌트는 생명주기, 라이프사이클이 존재합니다. 라이프사이클은 3가지 단계로 나뉘어지는데 mount, update, unmount로 화면에 컴포넌트가 처음 렌더링될 때, 업데이트 될 때, 제거될 때로 구분되며 이에 대한 라이프사이클 메서드를 통해 개발자가 통제할 수 있습니다.

 

참조

https://narup.tistory.com/268