-
5.23 S4U3 React 심화 종합퀴즈코드스테이츠 2023. 5. 23. 20:54
💁♀️ Real DOM (DOM)에 대한 설명으로 옳지 않은 것을 고르세요.
A. DOM은 Document Object Model의 약자로 JavaScript와 같은 스크립팅 언어가 <html>, <head>, <body>와 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것을 의미합니다.
B. 트리 구조로 DOM 객체가 이뤄져 있기 때문에 JavaScript는 쉽게 DOM 객체에 접근할 수 있고, DOM 객체를 조작할 수 있습니다.
C. DOM은 애플리케이션 UI의 상태가 변경될 때마다 해당 변경 사항을 나타내기 위해 업데이트 됩니다.
D. DOM의 렌더링은 브라우저의 파워에 의존하지 않기 때문에 DOM을 아무리 조작해도 성능에 영향을 미치지 않습니다.🔈 해설
정답 D
프로그래밍 언어로 조작하는 DOM은 애플리케이션 UI의 상태가 변경될 때마다 해당 변경 사항을 나타내기 위해 업데이트가 됩니다. 만약 이런 DOM을 조작하는 정도가 잦다면 성능에 영향을 미치게 될 것이고, DOM의 렌더링은 브라우저의 파워에 의존하기 때문에 DOM의 조작 속도는 느려지게 됩니다.
💁♀️ Virtual DOM에 대해서 옳지 않은 것을 고르세요.
A. 상대적으로 무거운 DOM에 비하여 React의 가상 DOM 객체는 실제 DOM 객체와 동일한 속성을 가지고 있음에도 “훨씬 가벼운 사본”이라고 표현할 수 있습니다
B. 가상 DOM 객체는 화면에 표시되는 내용을 실제 DOM 객체처럼 직접 변경하는 것까지 수행합니다.
C. 가상 DOM은 가상의 UI 요소를 메모리에 유지시키고, 그 유지시킨 가상의 UI 요소를 ReactDOM과 같은 라이브러리를 통해 실제 DOM과 동기화시킵니다.
D. 실제 DOM에 비해 가상 DOM 의 조작 속도가 훨씬 빠릅니다.🔈 해설
정답 B
Virtual DOM은 Real DOM의 가벼운 사본이지만, 화면에 표시되는 내용을 Real DOM처럼 직접 변경시키지는 않습니다. Virtual DOM은 가상의 UI 요소를 메모리에 유지시키고, 그 유지시킨 가상의 UI 요소를 ReactDOM과 같은 라이브러리를 통해 Real DOM과 동기화시키는 역할만 하고, 실제 브라우저의 화면에 표시되는 내용을 변경하는 것은 Real DOM입니다.
💁♀️ React Diffing Algorithm에서 React는 두 가지의 가정을 가지고 시간 복잡도 O(n)의 새로운 휴리스틱 알고리즘(Heuristic Algorithm)을 구현해냅니다. 두 가지 가정은 무엇인가요?
A. 각기 서로 다른 두 요소는 다른 트리를 구축할 것이다.
B. 앞의 선택이 이후의 선택에 영향을 주지 않을 것이다.
C. 개발자가 제공하는 key 프로퍼티를 가지고, 여러 번 렌더링을 거쳐도 변경되지 말아야 하는 자식 요소가 무엇인지 알아낼 수 있을 것이다.
D. 큰 문제를 작은 문제로 나눌 수 있고, 이 작은 문제가 중복해서 발견될 것이다.🔈 해설
정답 A,C
- 앞에 선택이 이후의 선택에 영향을 주지 않을 것이다 라는 조건은 앞으로 배우게 될 Greedy Algorithm의 최적의 해를 보장하는 조건 중 하나로, 탐욕적 선택 속성(Greedy Choice Property)입니다. 나머지 하나는 최적 부분 구조(Optimal Substructure)로, 문제에 대한 최종 해결 방법은 부분 문제에 대한 최적 문제 해결 방법으로 구성된다는 것입니다.
- 큰 문제를 작은 문제로 나눌 수 있고, 이 작은 문제가 중복해서 발견될 것이다 라는 조건은 앞으로 배우게 될 Dynamic Programming의 조건 중 하나인 Overlapping Sub-problems 입니다. 나머지 조건은 Optimal Substructure로 작은 문제에서 구한 정답은 그것을 포함하는 큰 문제에서도 같다. 즉, 작은 문제에서 구한 정답을 큰 문제에서도 사용할 수 있다는 것입니다.
💁♀️ React가 DOM 트리를 탐색하는 방법에 대해서 옳은 것을 고르세요.
A. 너비 우선 탐색(BFS)의 일종입니다.
B. 깊이 우선 탐색(DFS)의 일종입니다.
C. 전위 순회 방식의 일종입니다.
D. 후위 순회 방식의 일종입니다.🔈 해설
정답 A
React는 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때, 트리의 레벨 순서대로 순회하는 방식으로 탐색합니다. 즉 같은 레벨(위치)끼리 비교한다는 뜻입니다. 이는 너비 우선 탐색(BFS)의 일종이라고 볼 수 있습니다.
💁♀️ React Diffing Algorithm의 자식 엘리먼트의 재귀적 처리에서, 옳지 않은 것을 고르세요.
<ul> <li>first</li> <li>second</li> </ul> //자식 엘리먼트의 끝에 새로운 자식 엘리먼트를 추가했습니다. <ul> <li>first</li> <li>second</li> <li>third</li> </ul>A. React는 기존 <ul>과 새로운 <ul>을 비교할 때 자식 노드를 순차적으로 위에서부터 아래로 비교하면서 바뀐 점을 찾습니다.
B. React는 첫 번째 자식 노드들과 두 번째 자식 노드들이 일치하는 걸 확인한 뒤 세 번째 자식 노드를 추가합니다.
C. 동작 방식에 대해 고민하지 않고 리스트의 처음에 엘리먼트를 삽입하게 되어도 React는 변화한 곳을 알기 때문에 이전의 코드와 동일한 성능을 냅니다.
D. React는 이러한 동작 방식에 대해 key라는 속성을 지원해서 효율적으로 가상 DOM을 조작할 수 있도록 합니다.🔈 해설
정답 C
React는 원래의 동작하던 방식대로 위에서 아래로 순차적으로 비교해 갑니다. 따라서 처음의 노드들을 제일 먼저 비교하게 됩니다. 처음의 자식 노드를 비교할 때, <li>Duke</li> 와 <li>Connecticut</li>로 자식 노드가 서로 다르다고 인지하게 된 React는 리스트 전체가 바뀌었다고 받아들이기 때문에 전부 파괴하고 새로이 렌더링을 구축합니다. 이는 굉장히 비효율적인 방식입니다. 이렇게 React는 위에서 아래로 순차적으로 비교하기 때문에, 이 동작 방식에 대해 고민하지 않고 리스트의 처음에 엘리먼트를 삽입하게 되면 이전의 코드에 비해 훨씬 나쁜 성능을 내게 됩니다.
💁♀️ React가 Class 컴포넌트에서 Function 컴포넌트로 점진적으로 넘어가게 된 이유가 아닌 것을 고르세요.
A. Class 컴포넌트는 복잡해질수록 이해하기 어렵습니다.
B. Class 컴포넌트는 컴포넌트 사이에서 상태 로직을 재사용하기 어렵습니다.
C. JavaScript의 this 키워드가 어떤 방식으로 동작하는지 알아야 하는데, 이는 문법을 정확히 알지 못하면 동작 방식 자체를 정확히 이해하기 어렵습니다.
D. 상태 값을 사용하거나 최적화할 수 있는 기능들이 미진했습니다.🔈 해설
정답 D
상태 값을 사용하거나 최적화할 수 있는 기능들이 미진한 것은 초기의 Function(함수)컴포넌트입니다. Class(클래스) 컴포넌트는 componentDidMount(), componentDidUpdate() 등 렌더링 시점에 따라 어떻게 동작시킬 지 설정할 수 있는 메소드들이 존재하고 있었습니다.
💁♀️ React Hook의 사용 규칙에 대해 올바른 것을 모두 고르세요.
A. Class 컴포넌트에서도 사용할 수 있습니다.
B. React 함수의 최상위에서만 호출해야 합니다.
C. 반복문, 조건문, 중첩된 함수 내에서도 Hook을 작성할 수 있습니다.
D. 오직 React 함수 내에서만 사용되어야 합니다.🔈 해설
정답 B,D
- Hook은 다르게 말하면 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미합니다. Hook은 class 없이 function으로만 React를 사용할 수 있게 해주는 것이기 때문에 클래스형 컴포넌트에서는 동작하지 않습니다.
- 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않을 우려가 있습니다. 조건문, 반복문 안에서 Hook을 호출하게 되면 호출되는 순서대로 저장을 하기 어려워지고, 결국 예기치 못한 버그를 초래하게 될 수 있습니다.
💁♀️ useMemo를 적용하기 전 함수입니다. useMemo를 적용했을 시의 특징으로 올바르지 않은 것을 고르세요.
function Calculator({value}) { const result = calculate(value); return <> <div> {result} </div> </>; }A. 렌더링을 할 때마다 이 value 값이 계속 바뀌는 게 아니라면, useMemo Hook을 사용할 수 있습니다.
B. 만약 useMemo를 사용한다면, 사용하기 전에는 꼭 import해서 불러와야 합니다.
C. useMemo를 사용해 작성할 시, const result = useMemo(() => calculate(value), [value]); 으로 작성해야만 하는데, 배열 안에 value는 옵션입니다.
D. 메모이제이션(Memoization) 개념과 긴밀한 관계가 있습니다.🔈 해설
정답 C
useMemo는 2개의 매개변수를 필요로 하는데, 첫 번째 매개변수에는 어떻게 연산할지 정의하는 함수(calculate())를 넣어주고 두 번째 매개변수에는 deps 배열([value])을 넣어줍니다. 이 배열 안에 넣은 내용이 바뀌면 첫 번째 매개변수에 넣은 함수를 호출해서 값을 연산해주고, 만약에 내용이 바뀌지 않는다면 이전에 연산한 값을 재사용하게 됩니다. 즉, 값이 변경됐는지 안 됐는지 감지하는 부분이므로 해당 부분은 반드시 인식해야 할 값을 넣어줘야 합니다.
💁♀️ useCallback을 적용하기 전 함수입니다. useCallback을 적용했을 시의 특징으로 올바르지 않은 것을 고르세요.
function Calculator({x, y}) { const add = () => x + y; return <> <div> {add()} </div> </>; }A. useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook입니다.
B. useCallback Hook을 사용하면 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환합니다.
C. 단순히 컴포넌트 내에서 함수를 반복해서 생성하지 않기 위해서 useCallback을 사용하는 것은 큰 의미가 없거나 오히려 손해인 경우도 있습니다.
D. useCallback을 이용해 함수 자체를 저장해서 다시 사용하는 것은 함수의 메모리 주소 값을 저장했다가 다시 사용한다는 것과 같다고 볼 수는 없습니다.🔈 해설
정답 D
useCallback은 참조 동등성에 의존합니다. React는 리렌더링 시 함수를 새로이 만들어서 호출을 합니다. 새로이 만들어 호출된 함수는 이름이 같더라도 메모리 주소 값이 다르기 때문에 기존의 함수와 같은 함수가 아닙니다. 그러나 useCallback을 이용하면 함수 자체를 저장할 수 있습니다. 함수 자체를 저장한다는 것은 메모리 주소 값까지도 저장했다가 다시 사용한다는 것과 같다고 볼 수 있습니다.
💁♀️ Custom Hook에 대한 설명으로 올바르지 않은 것을 고르세요.
A. 상태관리 로직의 재활용이 가능합니다.
B. 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있습니다.
C. 함수형으로 작성하기 때문에 보다 명료하다는 장점이 있습니다.
D. 꼭 use를 함수 이름 앞에 붙이지 않아도 됩니다.🔈 해설
정답 D
Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이는 것이 규칙입니다. use가 붙지 않은 함수는 그저 일반 함수로 취급하기 때문에 Custom hook을 만들 때는 꼭 use를 붙여서 작성해야 합니다.
'코드스테이츠' 카테고리의 다른 글
5.24 Atomic Design (0) 2023.05.25 5.24 Design System (0) 2023.05.25 플젝시작 (0) 2023.05.16 깃 사용 (0) 2023.05.16 5.4 post man (0) 2023.05.04
