[코드잇 스프린트] 0416 데일리 퀴즈

 

1. Dom과 Virtual Dom의 차이점에 대해 설명해주세요

---

- DOM(Document Object Model)은 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이며 트리 데이터 구조로 표현된다.

- Virtual DOM은 실제 DOM의 가상 표현으로, 메모리 상에 있는 DOM의 트리 구조를 표현한다. 쉽게 말해 DOM과 같은 내용을 담고 있는 복사본이다.

 

2. 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요

---

- 제어 컴포넌트는 상태를 직접 관리하고, 입력 필드나 선택 요소의 값이 변경 될 때 상태를 업데이트 한다.

- 비제어 컴포넌트는 상태를 직접 관리하지 않고, 입력 요소에 대한 레퍼런스를 사용하여 값을 가져오거나 설정한다. 이러한 컴포넌트는 입력 값이 변경 되더라도 상태 업데이트를 통해 렌터링이 일어나지 않는다. 

예시로 input 태그의 type이 file인 경우가 이에 해당한다.

 

3. React Hook을 함수형 컴포넌트 내에서만 호출해야 하는 이유를 설명해주세요

---

Hooks의 규칙 중 하나는 "Hooks는 최상위 레벨에서만 호출해야 한다"는 것이다.

이는 반복문, 조건문 또는 중첩된 함수 내에서 Hooks를 호출하면 안된다는 뜻인데, 그 이유는 리액트가 Hooks를 호출하는 순서에 의존하여 해당 Hooks가 관리하는 상태와 연관성을 유지하기 때문이다.

 

리액트는 Hooks가 호출되는 순서를 매 렌더링에서 동일하게 유지하는 방식으로, 각각의 Hook에 대한 상태를 추적하고 관리한다. 따라서 Hooks의 호출이 조건부이거나 루프 내부에서 발생하면, 이러한 호출 순서는 렌더링 간에 일관성이 유지되지 않을 수 있다. 이로 인해 상태가 예상치 못한 방식으로 업데이트될 수 있다.

 

4. State와 Ref의 차이점에 대해 설명해주세요

---

- State는컴포넌트의 렌더링과 관련된 데이터를 관리한다.

상태가 변경되면 컴포넌트는 재렌더링되어 새로운 상태에 따라 UI를 업데이트한다. 상태는 컴포넌트의 라이프사이클 동안 지속되며, 주로 useState 훅을 사용하여 관리한다.

 

- Ref는 컴포넌트나 DOM 요소를 직접 참조할 수 있는 방법이다.

ref를 사용하여 DOM 요소에 직접 접근하거나, 컴포넌트 내에서 특정 값을 유지할 수 있다. ref는 state와 달리 렌더링에 영향을 미치지 않으며, 값이 변경되어도 컴포넌트는 재렌더링되지 않는다. useRef 훅을 사용하여 레퍼런스를 생성할 수 있다.

 

다음은 둘의 차이를 나타낸 표이다.

특징	useRef	useState
반환 값	useRef(initialValue)는 { current: initialValue }을 반환한다.	useState(initialValue)는 상태 변수의 현재 값과 상태 설정 함수([value, setValue])를 반환한다.
리렌더링	값이 변경되더라도 리렌더링 되지 않는다.	값이 변경되면 리렌더링된다.
가변성	가변적이며, 렌더링 프로세스 외부에서 current의 값을 수정할 수 있다.	불변적이며, 상태 변수를 수정하려면 상태 설정 함수(setValue)를 사용해야 한다.
렌더링 중 사용	렌더링 중에 current 값을 읽거나 쓰지 않아야 한다.	언제든지 상태를 읽을 수 있다. 각 렌더링은 변경되지 않는 상태의 스냅샷을 가진다.