22/11월 TIL(Q. DOM & useRef & useEffect 란?)

Q. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요

 

노드가 변경되어 레이아웃을 변경 할 때, DOM은 변경 될 때마다 레이아웃을 다시 구성하나,

가상 DOM은 컴포넌트가 업데이트 될 때, 레이아웃을 한번만 계산합니다. 리액트는 가상DOM의 얕은 비교와 일괄 돔 업데이트 방식을 이용해 성능을 향상시켰습니다.

 

⇒ 버츄얼 돔(가상 돔 || Virtual DOM) 이란?

가상돔은 실제 DOM에서 처리하는 방식이 아닌 가상돔과 메모리에서 미리 처리하고 저장한 후 실제DOM과 동기화하는 프로그래밍 개념입니다. 해당 DOM을 컴포넌트 단위로 쪼개 HTML 컴포넌트 조립품 처럼 다루는 개념입니다.

⇒ DOM 이란?

DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게 브라우저가 트리구조로 만든 문서 객체 모델을 의미합니다.

여기서 문서 객체란 html, head, body(h1, p, ul태그 등) 과 같은 JS가 이용할 수 있는 객체를 의미합니다.

(JS는 Document 라는 전역 객체를 통해 html에 접근해 태그들을 조종합니다. Ex⇒ document.getElementById() 등)

---

Q. useRef 란?

특정 DOM을 가리킬 때 사용하는 Hook 함수.

(ex, 포커스 설정, 특정 엘리먼트 크기/ 색상 변경 등)

 

사용법

1) Focus

리액트에서 특정 DOM을 선택해야 하는 상황에 useRef를 사용한다.

useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해서 사용하면 된다.

 

 2) 변수 관리

useRef 특정 DOM을 선택하는 용도 외에 Component 안에서 변수 관리하는 용도로도 사용합니다.

useRef를 이용해 변수를 업데이트하면 해당 Component가 리렌더링이 되지 않아 리렌더링이 필요없는 변수를 관리할 때 useRef 사용이 효율적입니다. (굳이 useRef사용 시 리 렌더링을 원한다면 callback ref 사용)

⇒ useRef로 변수 관리 예시

• setTimeout, setInterval을 통해 만들어진 id
• scroll의 위치
• 배열에 새 항목이 추가 될 때 필요한 고유 key값
• 외부 라이브러리를 사용해 생성된 인스턴스

import React, {useRef} from 'react'; 
import UserList from './UserList';

const App = () => { 
const users = [ 
    {id:1, name: '김채원'}, 
    {id:2, name: '푸푸'}, 
    {id:3, name: '쌈무'} 
];
const nextId = useRef(4); 
const onCreate = () => { // 배열에 항목 추가하는 부분 생략 
	nextId.current += 1; 
}; 

return <UserList users={users}/>; 
}

export default App;

 

---

Q. useEffect의 실행 순서

useEffect는 컴포넌트가 랜더링이 된 후에 실행되는데 하위에 있는 컴포넌트의 useEffect가 먼저 실행이 된다.

(Bottom → Top 방식으로 작동)

 

useEffect 사용법

⇒ dependency배열 x

useEffect(() ⇒ {
});		//컴포넌트 랜더링 시 마다 실행

⇒ dependency배열에 빈 값 전달

useEffect(() ⇒ {
}, []);		// 컴포넌트가 마운트될 때 한번만 실행

⇒ dependency배열에 변수 전달

useEffect(() ⇒ {
}, [value]);	// 컴포넌트가 마운트될 때 한 번 실행 + ‘value’ 값이 변경 될 때 실행