리액트 면접질문 & 답변 모음
1. React란 무엇인가요?
리액트는 현 메타(구 Facebook)에서 만든 사용자 UI 라이브러리로,
컴포넌트 기반으로 재사용 가능한 UI를 만들 수 있습니다.
State 변화에 따라 효율적으로 DOM을 갱신해주는 Virtual DOM을 사용합니다.
2. Virtual DOM이란?
React에서 Virtual DOM은 실제 DOM의 성능 문제를 해결하기 위해 도입된 개념입니다.
Virtual DOM은 실제 DOM의 복사본이고, 상태가 변경되면 가상돔트리를 새로 만들어 이전에 생성된 가상돔과 비교한 뒤 변경된 부분만 실제 DOM에 반영합니다. 이로인해 성능이 최적화됩니다.
+ 왜 변경된 부분만 실제돔에 반영해야 성능이 최적화되나요?
DOM 조작은 스타일 계산, 레이아웃 재계산, 페인팅 등 많은 리소스를 요구하는 작업이기 때문입니다.
3. Virtual DOM은 어떻게 동작하나요?
새롭게 생성된 Virtual DOM과 이전 Virtual DOM을 비교(diffing)합니다. 이후, 실제 DOM에 UI를 업데이트하는데 이과정을 Reconciliation, 재조정이라고 합니다.
이러한 과정들이 효율적으로 동작하는 이유는 변경된 모든 Element들을 집단화 시켜 이를 한번에 DOM에 적용시키기 때문입니다. 이러한 집단화 과정을 배치 업데이트라고 합니다. (여러 번의 수정을 집단화 시켜 한번만 적용)
출처: 별코딩
4. 리액트의 동작 흐름 설명
컴포넌트 렌더링 => 버츄어 돔 비교(Diffing) => 변경사항 파악 => 실제 DOM 업데이트(Reconciliation)
5. useEffect는 언제 사용하나요?
컴포넌트가 마운트/업데이트/언마운트 될 때 필요한 로직을 처리할 때 사용합니다.
6. 상태 끌어올리기란?
형제 컴포넌트 간 상태 공유를 위해 공통 부모 컴포넌트로 상태를 옮기는 패턴입니다.
리액트는 단방향 데이터 흐름을 갖기 때문에 상태를 공유하려면 상위 컴포넌트에서 관리해야합니다.
상태 끌어올리기란, 여러 자식 컴포넌트가 공유해야 하는 상태를 공통 부모 컴포넌트에서 관리하는 것입니다.
리액트는 단방향 데이터 흐름을 가지고 있기 때문에, 여러 컴포넌트에서 동일한 상태를 공유해야 할 경우 그 상태를 공통 부모 컴포넌트로 올려서 관리해야 합니다.
7. React.memo, useMemo, useCallback 차이?
| React.memo | 컴포넌트를 props 변화 없을 시 리렌더링 방지 |
| useMemo | 값의 메모이제이션 (계산 비용 큰 함수) |
| useCallback | 함수를 메모이제이션 (props로 함수 전달 시) |
8. SSR vs CSR
SSR은 서버에서 HTML을 클라이언트에 전달하는 방식이고, CSR은 JS가 실행되면서 클라이언트에서 렌더링됩니다.
Nextjs => SSR 지원
9. 리액트에서 불변성을 지켜야하는 이유는?
아니 불변성은 왜이리 맨날 공부할 때마다 헷갈리는 거임..
js 에서 원시타입_불변, 참조타임_변
메모리힙의 영역이 변경되지않았다 = 불변하다
참조타입의 경우 주소가 아닌 실제 데이터가 들어있는 곳이 메모리힙임
메모리힙의 영역을 변하지 않게 하려면 push(6) 이런식으로 변경하는 게 아니라 새로운 배열이나 객체를 할당해줘야함
리액트는 상태 변화 감지를 위해 얕은 비교를 사용하므로, 상태를 직접 변경하지 않고 불변성을 지켜서 새로운 객체를 생성해야만 변경이 감지되고 리렌더링이 정확하게 일어납니다.