면접질문 (1)

1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?

 

리액트는 SPA로서, JS로 DOM을 직접 조작하는 대신 가상 DOM(Virtual DOM) 방식을 사용하여 화면 요소를 제어합니다. 

이로 인해 직접 변수를 변경하는 것이 아니라 state를 통해 데이터를 관리해야만 변경 사항이 적용될 수 있습니다.
상태 관리는 주로 두 가지 방식으로 구분됩니다. 첫 번째, 지역적으로 상태 관리를 합니다. 해당 컴포넌트에서만 사용되는 state라면 컴포넌트 내에서 선언하여 관리합니다. 두 번째로는 전역적으로 상태관리를 합니다. 여러 컴포넌트에서 공유되는 상태는 전역 상태 관리 라이브러리인 redux를 사용하여 관리하고 서버로 데이터를 받았을 때는 tanstack-query의 queryKey를 통해 데이터를 관리합니다.

 

---

 

 

2. Redux가 무엇인가요, 왜 Redux를 사용하시나요?

 

Redux는 state를 모든 컴포넌트에서 접근 가능하도록 관리하는 상태 관리 라이브러리입니다. 리액트의 단방향 데이터 흐름에서는 데이터의 이동이 부모-자식 컴포넌트 사이에서 자유롭지 않다는 단점이 있습니다. 이를 해결하기 위해 Redux가 등장하였습니다. Redux를 사용하면 어떤 컴포넌트에서든 해당 데이터를 핸들링할 수 있고 쉽게 관리가 되기 때문에 데이터 흐름이 유연해지고, 사용자에게 다양한 정보를 쉽게 제공할 수 있습니다.

 

 

---

 

 

3. Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요

 

Recoil의 특징, Redux와의 차이점

Recoil의 특징

1. 애플리케이션 전역 상태를 Atoms 라고 불리는 단위로 관리하여 여러 컴포넌트에서 읽고 쓸 수 있습니다.

2. React의 함수 컴포넌트에서 선언적으로 상태 정의할 수 있도록 지원합니다.

3. 비동기적으로 데이터 가져올 수 있도록 설계되어 있습니다.

Redux와의 차이점

1. Redux는 단일 상태 트리이지만 Recoil은 여러 개의 원자를 사용하고, 상태를 더 작은 단위로 분리도 가능합니다.

2. Redux는 액션, 리듀서, 스토어 등 많은 보일러 플레이트 코드를 필요로 하지만 Recoil은 적은 양의 코드로 상태 관리가 가능합니다.

3. 컴포넌트 간 연결이 느슨하여, 대규모 애플리케이션에서 성능 면 우월성을 가집니다.

4. 비동기 상태를 간편하게 다룰 수 있도록 설계되어, 비동기 작업에 유리합니다.

 

 

---

 

 

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

 

가상 DOM(Virtual DOM)은 실제 DOM과 완전히 동일한 구조의 복사본으로, 메모리 상에 존재하는 JavaScript 객체입니다. 이를 이용하면 실제 DOM을 직접 조작하는 것보다 메모리 상의 가상 DOM을 변경하는 작업이 더 가볍고 효율적입니다.
또한,  가상 DOM은 배치 업데이트(Batch Update) 개념을 활용합니다. 배치 업데이트는 가상 DOM에서 여러 요소의 변경 사항을 한 번에 모아서 한 번만 실제 DOM을 갱신하는 방식입니다. 예를 들어, 인스타그램에서 여러 개의 엘리먼트가 변경되어야 할 때, 가상 DOM은 이 모든 변경 사항을 한 번에 처리하여 한 번만 화면을 갱신합니다. 이렇게 함으로써 실제 DOM을 여러 번 갱신하는 것보다 효율적이고 빠른 업데이트가 가능해집니다. 가상 DOM을 사용하는 것은 배치 업데이트를 통해 성능을 최적화하는 중요한 방법 중 하나입니다.

 

 

 

 

 

 

---