[프론트엔드] cs 지식5 - React 편

1. dom이란?

 => 문서 객체 모델이라고 불리우며, 문서의 구성 요소들을 객체로 구조화 하여 표현 한 것. 쉽게 설명하면 문서 전체에 html 태그를 tree dom으로 구성함

 

 

2. Virtual dom

 => Dom을 추상화한 가상의 객체, 즉 직접 dom을 접근하지 않고, 가상의 공간에서 dom을 사용하는 것. 즉, 직접 dom에 접근하지 않아 성능 향상에 개편됨

 

 

3. Virtual Dom 동작 원리

 => DOM을 추상화 한 객체를 메모리에 저장고, 이는 Javascript 객체를 건드는 행위이기 때문에 변경 사항 발생 시 메모리 변경으로 처리 되기 때문에 즉시 반영된다. 이 과정은 재조정을 한다라고 표현한다.

 

 

4. 재조정이란?

 => Batch Update 방식으로 처리하여 변경 사항을 모든 Elememt를 집단화 시켜 한번에 실제 DOM에 적용시키는 방식이다. 예를 들어, 10개의 리스트 변경 시 실제 DOM은 10번 반복하여 처리하는 방식이지만, Virtual DOM에서는 하나의 코드를 변경 시 10번 반복하지 않고 변경사항만 처리한다.

 

 

5. 상태관리 기법이란?

 => React 에서는 State로 상태관리를 할 수 있으며 로컬 기법과 전역 기법으로 사용 가능합니다. 로컬기법은 해당 컴포넌트에서 부모 자식 컴포넌트 간의 state를 공유하지만 전역 기법은 Redux나 Recoil 등 전체적으로 관리 할 수 있게 합니다.

 

 

6. Redux 로 상태 관리의 대한 특징

 => 전통적으로 사용하고 있는 상태관리 기법으로 store, reducer, action 등과 같이 구성됩니다. state를 직접 제어 할 수 없고, action을 통해 상태 관리를 진행 할 수 있습니다. 이는 러닝커브가 높다는 단점을 지니고 있어 Recoil이나 MobX 등으로 대처 할 수 있습니다.

 

 

7. Recoil 로 상태관리의 대한 특징

 => 전통적으로 상태 관리를 Redux로 하다가 Recoil 등장으로 Redux의 비해 구현이 쉽고, 간편하게 사용이 가능합니다. 따라서 Redux의 비해 러닝커브가 낮고 적용하기 쉬우며 최근 트렌드로는 React-Query와 함께 많이 사용함

 

 

8. React-Query의 대한 특징

 => 캐싱 작업을 통해 서버 작업 및 데이터 변경 사항이 생기면 React에서 변경 사항을 적용 시켜주는 것을 말합니다. 이는 오래된 데이터를 파악하여 실시간으로 변경 해주는 기술 중 하나

 

 

9. SPA란

 => 1개의 페이지에서 여러 컴포넌트를 통해 해당 페이지 접근 시 해당 페이지에 알맞게 View단을 표현하는 것을 말함, Vurtual DOM 등장으로 SPA 프레임워크를 만들어 개발이 가능하다고 표현함