React

리액트 프리온보딩 사전 과제 질문

solfa 2024. 3. 1. 22:23

면접 질문들 같다 ㅎ

일단 적어둠

Q1. DOM과 Virtual DOM을 설명해주세요

- DOM (Document Object Model): HTML이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고, 이벤트에 반응하며 값을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태를 의미한다. (DOM은 HTML, XML 또는 XHTML로 작성된 문서의 객체 지향 표현이라는 뜻) 웹 브라우저가 HTML 문서를 로드할 때, 각 요소(element)는 객체가 되고, 스크립트를 통해 이 객체들을 조작할 수 있다.

 

+ DOM 조작의 비효율성
예를 들어 유저가 어떤 포스트에 좋아요를 누르거나 담아둔 장바구니 목록에서 상품을 하나 삭제하면 전체 노드들이 처음부터 다시 그려지게 된다! -> 불필요한 반복이 반복되어 DOM을 조작하는 소모적인 비용이 증가하는 문제 발생
따라서 최근에는 SPA, Single Page Application을 많이 사용하면서 DOM tree를 즉각적으로 변경하는 방법을 이용한다. 전체 페이지를 서버에서 매번 보내주는 것이 아니라 브라우저 단에서 자바스크립트가 관리하기 때문에 DOM조작을 더욱 더 효율적으로 관리해줌!
 

+ SPA, Single Page Application이란?
하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠 방식을 바꾸는 방식의 웹 어플리케이션이다.

- Virtual DOM: 실제 DOM의 가벼운 복사본으로 메모리 상에서만 존재하는 가상의 DOM을 의미한다. 변화가 실제 DOM에 적용되기 전에 가상의 DOM을 한번 거쳐 미리 처리하고 저장한 후 실제 DOM에 업데이트 할 수 있게 해준다.

-> 원본 DOM 구조를 추상화하여 메모리에 유지하고, 실제 DOM과의 비교를 통해 변경 사항을 최소화하는 것이 목적! 변경이 필요한 부분만 실제 DOM에 반영하여 효율적으로 렌더링할 수 있게 됨.

 

Q2. 리액트의 특징을 설명해주세요. 

  1. Data Flow
    리액트는 단방향 데이터 플로우를 따른다. (부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달!) 데이터가 변경되면 리액트는 자동으로 해당 변경 사항을 감지하고 관련된 컴포넌트만 다시 렌더링한다.
  2. Component 기반 구조
    리액트는 UI를 구성하는 독립적인 구성 요소로 나누어 개발하는 컴포넌트 기반 구조를 가지고 있다. 각 컴포넌트는 자체적으로 상태(state)를 가지고 있으며, 필요한 경우 UI를 업데이트할 수 있다. 캡슐화된 컴포넌트가 스스로 상태를 관리하고 복잡한 UI도 효과적으로 구성할 수 있다.
  3. Virtual DOM
    Virtual DOM은 실제 DOM의 가벼운 복제본으로 리액트는 컴포넌트의 상태 변화에 따라 Virtual DOM을 업데이트하고 이를 실제 DOM과 비교하여 변경 사항을 최소화한다. 
  4. Props and State
    리액트 컴포넌트는 props와 state라는 두 가지 유형의 데이터를 가진다.
         props
             부모 컴포넌트로부터 전달되는 읽기 전용 데이터이다.
              컴포넌트 내부에서 변경할 수 없다.
              컴포넌트 간의 데이터 흐름을 구성하는 데 사용된다.
         state
              컴포넌트의 내부 상태를 나타낸다.
              컴포넌트 내부에서 변경할 수 있다.
              컴포넌트의 동적인 데이터를 관리하는 데 사용된다.
  5. JSX
    자바스크립트와 XML을 조합한 JSX 문법을 사용하여 코드 안에 마크업을 포함시켜 UI를 정의할 수 있으며 코드의 가독성이 높아진다. JSX는 React에서 컴포넌트의 구조를 표현하고 컴포넌트 간의 상호작용을 더욱 간편하게 만들어준다. JSX는 Babel과 같은 트랜스파일러를 사용하여 일반 JavaScript 코드로 변환된다.

 

Q3. flux 패턴에 대하여 설명해주세요.

- Flux 패턴은 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처 패턴이다. 데이터 플로우를 단방향으로 유지하여 애플리케이션의 복잡성을 줄이는 데 중점을 두고 있다. 요소들은 다음과 같다.

  1. Action: 애플리케이션에서 발생하는 모든 작업을 나타내는 단순한 객체이다.
  2. Dispatcher: 액션을 받아서 등록된 콜백 함수에 전달하는 중앙 허브 역할을 한다.
  3. Store: 애플리케이션의 상태와 비즈니스 로직을 포함하고, 상태가 변경될 때마다 변경된 내용을 뷰에게 전달한다.
  4. View: 사용자 인터페이스를 나타내며, 스토어로부터 상태를 가져와 렌더링한다.

 

Q4. 상태관리에 대하여 설명해주세요.

- 상태 관리란 여러 component 간에 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 것이다. 주로 상태 관리 라이브러리나 프레임워크를 사용하여 이를 관리하며, 리덕스, MobX, Context API 등이 있다. 상태 관리를 통해 애플리케이션의 상태를 중앙 집중화하고, 컴포넌트 간의 의존성을 줄이며, 데이터 흐름을 예측 가능하게 만든다.

 

728x90