React Quiz - useState, Virtual DOM, useMemo/useCallback

1. Closure에 대해 JavaScript, React 관점으로 각각 설명해주세요. (React 설명시 useState를 예시로 들어 설명해주세요)

• JavaScript에서는 함수가 생성될 때 자신의 상위 스코프를 기억하고 있기 때문에, 상위 스코프인 외부 함수의 생명 주기가 끝나도 내부 함수는 외부 함수의 변수를 참조할 수 있습니다. 이렇게 상위 스코프의 변수를 참조하고 있으면서 상위 스코프보다 더 오래 유지되는 함수를 클로저라고 합니다.
• React에서 컴포넌트의 상태가 변경했을 때, 이전 상태와 현재 상태를 비교하기 위해서 이전 상태를 기억하고 있어야 합니다. useState 훅을 정의하는 상위 스코프에 상태 변수를 선언하여, useState가 상태 변수를 참조할 수 있게 합니다. 그래서 useState는 이전 상태를 참조할 수 있고, useState가 반환한 setter 함수를 사용하여 상태를 변경할 수 있습니다.
  
  

1.1 Closure를 사용한 경험에 대해 설명해주세요.

• JavaScript에서는 전역 변수를 최소화하고 외부에서 변수를 노출 시키지 않게 하기 위해서 클로저를 사용합니다.
• React에서는 useState 훅에서 주로 closure를 사용합니다.

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

• Virtual DOM은 실제 DOM을 추상화한 JavaScript 객체입니다. React는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 회수를 최소화합니다. 작동 원리는 다음과 같습니다. 데이터가 업데이트하면, 업데이트가 반영된 전체 UI를 Virtual DOM에 리렌더링합니다. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교하여 바뀌 부분만 실제DOM에 적용합니다.

2.1 Virtual DOM을 비교하는 비교 알고리즘에 대해 설명해주세요.

• 이전 virtaul DOM 트리와 현재 virtual DOM 트리를 비교할 때, Root 요소부터 비교하고 그 자식 요소들을 재귀적으로 비교합니다.
• 두 요소를 비교할 때, 요소의 타입이 서로 다르면 이전 트리를 버리고 새로운 트리를 구축합니다. 만약 요소의 타입이 같다면 두 요소의 속성을 확인하여 동일한 속성은 유지하고 변경된 속성만 갱신합니다.

3. useMemo와 useCallback에 대해 설명해주세요.

• useMemo는 리렌더링 사이에 계산 결과값을 캐쉬해주는 훅이고, useCallback은 리렌더링 사이에 함수 정의를 캐쉬해주는 훅입니다.

3.1 useMemo와 useCallback은 언제 사용되나요?

• useMemo는 복잡한 연산 결과를 저장할 때 주로 사용됩니다.
• useCallback은 prop에 넘겨주는 함수나 핸들러 콜백 함수에 주로 사용됩니다.

3.2 memo와 useMemo의 차이에 대해 설명해주세요.

• memo는 리렌더링 사이에 컴포넌트를 캐쉬해주는 API이고, useMemo는 리렌더링 사이에 연산 결과값을 캐시해주는 훅입니다. memo한 컴포넌트는 props가 변하지 않으면 리렌더링 되지 않고, memo한 연산 결과는 dependencies list의 값들이 변하지 않으면 재연산되지 않습니다.