-
버츄얼 돔과 리얼 돔의 차이를 설명해주세요.
- 답변
Real dom은 element의 자식노드가 추가되면 전체 문서가 갱신되지만 virtual dom은 버퍼 역할 해줌으로서 real dom을 추상화한 dom과 비교하여 변경점만 real dom에 적용하여 전체 문서가 갱신되지 않습니다.
-
real dom: 트리가 거대해지면 속도 이슈 발생
잦은 돔 업데이트는 오류와 UI에 악영향을 미침
변경점을 적용한 문서를 계속 리렌더링 해줘야하는데 트리가 거대하다면 그만큼 리소스가 소모댐 -
virtual dom: 주로 SPA(하나의 큰 HTML을 Real Dom으로 가지고 있는) 적용되는 개념
하나의 큰 html을 real dom으로 칭하고 해당 DOM을 컴포넌트 단위로 쪼개서 추상화한 개념
Real Dom에서 직접 처리하는 게 아니라 virtual DOM이 버퍼 역할을 해줌으로써 어떤 부분이 바뀔지 미리 계산, 수정 후에 해당 수정된 부분만 업데이트 해주기 위한 기술memory트리구조rendering추상화
-
useRef에 대해 설명해주세요.
-
답변
useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 react hook. ref는 reference, 참조를 뜻한다. react 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야 하는 상황이 필요함. 그럴때 useRef라는 React Hook 사용한다.
useRef로 관리하는 값은 값이 변해도 화면이 렌더링되지 않음.`react hook` `저장공간, DOM 참조`
-
-
useEffect의 실행 순서에 대해 설명해주세요.
- 답변
리턴문 끝나고 useEffect문 실행된다.
상단코드 -> return 문 내부 ->useEffect 순서로 찍힘.
- 컴포넌트가 렌더링되면 useEffect 훅이 실행된다.
- useEffect 훅은 의존성 배열에 지정된 값들을 이전 렌더링과 비교한다.
- 의존성 배열에 지정된 값 중 하나라도 이전 렌더링과 다르다면, useEffect의 콜백 함수가 실행된다.
- useEffect의 콜백 함수는 부수 효과 작업을 수행한다. 예를 들어 API 호출, 이벤트 등록, 구독 등의 작업을 수행할 수 있다.
- 컴포넌트가 다음으로 렌더링될 때까지 useEffect의 콜백 함수는 실행되지 않는다.
- 컴포넌트가 다음으로 렌더링될 때, 다시 의존성 배열을 비교하고 변경 여부에 따라 useEffect의 콜백 함수를 실행할지 결정한다.
의존성 배열이 비어있는 경우 ([]), useEffect의 콜백 함수는 컴포넌트가 처음 렌더링될 때에만 실행된다.
- 답변
