TIL 10/11 기술면접질문

• Virtual DOM 이 무엇인지, Virtual DOM 작동 원리에 대해 설명해주세요.

가상돔이란 실제 DOM과 구조가 완벽히 동일한 복사본 형태입니다. 객체(object) 형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것 보다 훨씬 더 빠르게 조작을 수행할 수 있습니다.

 

처음 웹을 실행하면 가상 DOM이 생성됩니다. 사용자가 동작 또는 데이터 변경으로 인해 웹의 상태가 변경되면 실제 DOM을 직접 수정하지 않고 상태가 update된 새로운 가상 DOM을 생성됩니다. 이후 가상 DOM과 새로운 가상 DOM간의 차이를 비교하고 변경된 부분을 실제 DOM에 Batch Update로 반영합니다.

---

• ⭐️React를 사용하는 이유에 대해 말씀해주세요.

React는 가상 DOM을 사용하여 실제 DOM조작을 최적화한다. 이는 웹 애플리케이션의 성능을 향상시키고 빠른 렌더링을 가능하게 한다. 변경된 부분만을 업데이트하므로 불필요한 DOM조작을 최소화한다.

컴포넌트 기반개발- React는 컴포넌트 기반 개발을 촉진한다. UI를 독립적인 컴포넌트로 나누어 개발할 수 있으며, 재사용성과 유지보수성을 향상시킨다.

단방향 데이터 흐름 - React는 단방향 데이터 흐름을 채택하여 데이터 흐름을 예측 가능하게 만든다. 이로서 데이터 변화를 추적하기 쉽고 버그를 줄이며, 애플리케이션의 복잡성을 관리할 수 있다.

 

      단방향데이터 흐름이란?

1. 데이터는 상위 컴포넌트에서 하위 컴포넌트로만 흐르며, 데이터의 흐름은 항상 상위에서 하위로 방향성을 가집니다. 이것은 부모 컴포넌트가 하위 컴포넌트에 데이터를 전달할 수 있지만 하위 컴포넌트는 직접 부모 컴포넌트에 데이터를 변경시킬 수 없습니다.
2. 불변성: React에서는 데이터를 불변하게 유지하는 것이 권장됩니다. 데이터가 불변하면 데이터 변경을 추적하기 쉬워지고 예측 가능한 흐름을 유지할 수 있습니다

커뮤니티와 생태계 - React는 큰 개발자 커뮤니티와 풍부한 생태계를 가지고 있어, 문제를 해결하고 다양한 라이브러리 및 도구를 사용할 수 있다.

---

• ⭐️제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.

 

제어 컴포넌트의 경우 사용자가 입력을 하는 액션을 취할 때마다 리렌더링을 발생시키는 반면, 비제어 컴포넌트는 제어 컴포넌트 방식에서 사용한 setState() 등 쓰지 않고 ref를 사용해서 값을 얻기 때문에 사용자가 직접 트리거 하기 전까지는 리렌더링을 발생시키지도 않고 실시간으로 동기화 되지 않는다.

---

• key props를 사용하는 이유는 무엇인가요?

key를 사용하면 React가 각 항목을 고유하게 식별할 수 있다. 이를 통해 React는 배열에서 항목을 추가, 삭제 또는 재배열할때 변경을 효율적으로 처리할 수 있다. React의 가상 DOM 재조정 알고리즘은 key를 활용하여 효율적인 업데이트(변경된 "key"를 가진 컴포넌트만 업데이트하고, 기존 "key"와 일치하지 않는 컴포넌트를 제거)를 수행한다.

고유성을 보장하고 성능을 최적화