실제 DOM의 문제점으로 옳은 것을 모두 고르세요

• 성능
• 브라우저 간 호환성
• 보안 취약성

엘리먼트의 offsetWidth를 읽기만 해도 브라우저가 문서의 전체나 일부 레이아웃을 다시 계산하는 과정을 거친다

SyntheticEvent에 대한 설명으로 올바른 것은?

• 리액트가 만든 추상 이벤트로, 브라우저 간 호환성을 높인다.
• 실제 DOM 이벤트 객체를 직접 반환한다.
• 이벤트 핸들러 내부에서 자동으로 이벤트가 제거된다.

리액트는 자식 노드들의 순서가 바뀐 경우, 전체 자식 노드를 제거한 뒤 새로 생성하여 DOM을 업데이트한다.

다음 코드의 실행 결과로 올바른 설명은? const frag = document.createDocumentFragment(); for (let i = 0; i < 100; i++) frag.appendChild(document.createElement('li')); document.getElementById('list').appendChild(frag);

• 한 번에 DOM에 붙여 렌더링은 한 번만 발생한다.
• 각 li가 DOM에 바로 추가되어 렌더링이 100번 발생한다.

부모 컴포넌트의 상태가 변경될 때, 자식 컴포넌트에 전달된 props가 변하지 않으면 자식 컴포넌트는 리렌더링되지 않는다.

다음 중 JSX에서 스칼라 값이 렌더링되는 방식에 대한 설명으로 올바른 것은?

• 문자열과 숫자는 JSX 내부에서 무시된다
• JSX 안에서 스칼라 값을 사용하면 DOM 노드가 아니라 콘솔 로그로만 출력된다
• JSX에서 문자열이나 숫자 같은 스칼라 값은 자동으로 텍스트 노드로 렌더링된다
• JSX는 오직 React.createElement 호출 결과만 렌더링할 수 있다

```jsx function Welcome(props) { return

Hello, {props.name}

; } const element = ; ``` 위 JSX가 리액트 내부에서 변환되는 엘리먼트 객체에서 type 필드의 값은?

• 'Welcome'
• Welcome 함수
• "

  Hello, React

  "
• React.Component 클래스의 인스턴스

[?] 안에 들어가는 것으로 올바른 속성은? { [?]: Symbol(react.element), type: 'h1', key: null, ref: null, props: { className: 'greeting', children: 'Hello, World!' }, }

• $$typeof

새 트리와 이전 트리를 노드별로 비교해 트리의 어느 부분이 변경되었는지 알아내는 알고리즘은?

• 디핑

• 디핑 알고리즘

• diffing

• diffing algorithm