웹 개발

웹개발 핵심 질문들(DOM, Virtual DOM, React란, Flux 패턴, 상태관리)

쿠키는 서비스 2024. 2. 27. 14:01
반응형
  1. DOM과 Virtual DOM을 설명해주세요.
    우선 DOM은 Document Object Model의 약자로 HTML문서의 구조적인 표현이다. 웹페이지의 실제 구조이다.
    반면 Virtual DOM은 react와 같은 JS 라이브러리가 관리하는 Real DOM의 가상 표현이다. React는 Vurtual DOM의 상태 변경을 업데이트한 다음 React DOM과 동기화한다. Virtual DOM의 성능이 더 빠른 것은 처리 속도 자체가 빨라지는 것이 아니라 변경된 정보의 양이 적기 때문이다. 전체 페이지를 업데이트하는 데 시간을 낭비하지 않고 필요한 업데이트가 필요한 부분만을 상호 작용한다.

  2. 리액트의 특징을 설명해주세요.
    react는 UI를 만들기 위한 js library(재사용이 용이한 컴포넌트 단위로 UI를 구현해 나간다.), 웹, 모바일, 데스크탑 어플리케이션 3가지 모두 구현 가능하다. SPA(single page application)-페이지 내에서 네비게이션 하면서 다양한 페이지를 볼 수 있음 CSR(client side rendering)-클라이언트 사이드에서 렌더링을 해주는 방식, 웹의 경우 브라우저가 보통 렌더링을 해준다. 사용자 경험 즉 사용자 별 데이터를 다루는 데 유리하다.

  3. flux 패턴에 대하여 설명해주세요.
    Flux는 Facebook이 클라이언트측 웹 애플리케이션을 구축하는 데 사용하는 패턴이다. MVC(Model-View-Controller)패턴을 애플리케이션에 사용하면서 종속성과 연쇄적인 업데이트가 발생시킨 문제를 해결하기 위해 구현되었다.
    데이터가 일관된 단방향으로 흐르는 것이 Flux 패턴의 핵심이다.

  4. 상태 관리에 대하여 설명해주세요.
    리액트에서는 데이터를 관리하기 위해 상태 값을 가진다. 함수형 컴포넌트에서는 useState 훅을 사용하고 클래스 컴포넌트에서는 setState 메서드를 사용해서 컴포넌트를 정의한다. 상태 값이 변경되면 컴포넌트가 리렌더링 된다. 부모 컴포넌트의 상태값이 변경되면 자식 컴포넌트 또한 영향을 받아 리렌더링된다.

  5. 궁금한 것에 대해 알려주세요.
    웹 개발자가 꼭 알고 있어야 되는 핵심 개념들이 궁금합니다.

반응형