프론트엔드 기술면접 정리 3

외울려고 정리하는 거였는데 정리만 하고있다... 언제외우지.... ㅎ

⭐️React

 

📌Virtual DOM이란 무엇이며 Virtual DOM의 작동원리를 설명해주세요

• 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업이 무겁기 때문에 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM을 만들어서 관리하기 위하여 나왔습니다
• DOM의 구조를 흉내낸 JavaScript  객체이며 (트리구조) DOM이 가지고 있는 api addEventListener(), querySelector()를 갖지 않습니다
• 메모리 상에서 동작하며, 실제로 렌더되는것이 아니기 때문에 연산 비용을 최소화 할 수있습니다
• Virtual DOM의 작동원리는 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리 렌더링 합니다
• 이전 Virtual DOM에 있던 내용과 현재 Virtual DOM의 내용을 비교하고  이 과정을 "diffing"이라고 합니다
• 바뀐 부분만 실제 DOM에 적용합니다
• React는 Virtual DOM을 사용하여 대규모 애플리케이션을 구축할 경우 성능을 향상시킵니다

 

📌클래스형과 함수형 차이에 대해 설명해 주세요

• 클래스형 은 state, lifeCycle 관련 기능을 사용하고 함수형은 state, lifeCycle 관련 기능사용이불가능합니다 하지만 hook을 통해 해결할 수 있습니다
• 함수형은  메모리 자원을 클래스형 컴포넌트보다 적게사용할수 있고 렌더링이 필요할 때마다 호출되므로, 성능면에서 클래스형 컴포넌트보다 더 효율적입니다.
• 함수형 컴포넌트는 순수 함수로 작성하기 쉽기 때문에 테스트와 재사용이 용이하며, 코드의 가독성도 좋아질 수 있습니다

 

📌state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명해주세요.

• state는 immutable(불변성)을 유지해야하기 때문입니다
• PureComponent에서 동작하지 않습니다. PureComponent는 this.state와 setState를 비교해 업데이트가 필요한 경우에만 render함수를 호출해 줍니다. 이때, state를 직접 수정하게되면 기존의 this.state와 setState가 동일하므로 리액트는 render함수를 호출하지 않아 렌더링이 일어나지 않습니다

 

📌useEffect 와 useLayoutEffect 차이점에 대해서 설명해주세요

• useEffect와 useLayoutEffect는 React에서 상태(state) 또는 속성(props)이 변경되었을 때 컴포넌트가 렌더링되기 전 또는 후에 실행되는 함수를 정의할 때 사용됩니다.
• useEffect는  컴포넌트들이 render와 paint 된 후  비동기적(asynchronous) 으로 실행됩니다
• paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 볼수 있습니다
• useLayoutEffect는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가 되기 때문에 동기적(synchronous)으로 실행됩니다
• paint 가 되기 전에 실행되기 때문에 dom을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않습니다
• 하지만 많은 양의 업데이트가 있거나, useLayoutEffect에서 실행되는 코드가 오래 걸리는 경우, 브라우저의 응답성과 성능에 부정적인 영향을 미칠 수 있습니다.
• DOM을 변경해야 하는 경우나 계산된 state 값을 화면에 표출해야 하는 경우에는 useLayoutEffect를 사용하는 것이 좋고 그 외  fetch 함수실행 ,이벤트 핸들러, state를 다루는 작업 등 모든 경우에는 useEffect를 사용하는게 좋습니다

 

📌key props 사용 이유에대해 설명해주세요

• key는 컴포넌트 배열을 렌더링 할 때 사용하며 Virtual DOM을 비교할 때 어떤 변화가 일어났는지 빠르게 알아낼 수 있게 하기 위해 사용합니다
• Key 값은 list에서 해당 항목을 고유하게 식별할 수 있는 문자열이 가장 좋습니다
• Key 값을 배열의 index를 사용하는 건 지양합니다
•  component는 key를 기반으로 갱신,재사용되는데 index를 key로 사용하면, 항목의 순서가 바뀌었을 때 key도 변경되어 state까지 의도치않게 변경될 수 있습니다

 

📌React rendering 성능을 향상시키기 위한 방법들을 설명해주세요

• 컴포넌트 렌더링을 수행하는 조건은 props,state가 변경되었을 경우나 부모컴포넌트가 렌더링 되었을 때 일어납니다
• React.memo()를 사용하면 컴포넌트를 렌더링하여 그결과를 메모이징하는데 다음렌더링이 일어날때 props가 같으면 메모이징된 내용을 재사용하여 불필요한 리렌더링을 피할수 있도록 합니다
• key 값으로 index 사용하지 않습니다  index를 키값으로 설정한다면 중간에 새로운 값이 삽입된 경우 리마운트가 일어나며 데이터가 매칭되지 않아 리렌더링 될수 있습니다
• useMemo를 사용하면 계산 결과를 캐시하여 다음 렌더링에서 재사용하는 데 사용됩니다. 이는 계산이 비용이 많이 드는 경우 렌더링 성능을 향상시키는 데 유용합니다
• useCallback을 사용하면 종속 함수를 캐시하여 다음 렌더링에서 재사용하는 데 사용됩니다. 이는 자식 컴포넌트에 전달하는 함수가 매번 새로운 함수 인스턴스를 만들어 불필요한 렌더링을 유발하는 경우 유용합니다.
• React.lazy와 Suspense를 사용하면 필요할 때 컴포넌트를 로드하여 렌더링을 지연시킬 수 있습니다. 초기 로드 시간이 단축되고 애플리케이션의 전체적인 성능이 향상됩니다
• 큰 컴포넌트를 작은 하위 컴포넌트로 분할하여 성능을 향상시킬 수 있습니다.  작은 컴포넌트의 렌더링 속도가 빨라집니다.