면접 질문 대비 리스트(React)

React.js에서의 렌더링?

리액트가 함수를 호출하는 것.(component가 렌더링 된다는 것은 함수(component)를 호출하여 실행되는 것.)

렌더링 = 함수 호출 실행.

실행될 때마다 내부에 선언되어 있던 변수, 또다른 함수 등.. 도 매번 다시 선언됨.

React.js에서의 리렌더링?

- 자신의 state가 바뀌었을 때

- 부모에게서 받은 props가 바뀌었을 때

(하위 컴포넌트에 최적화 설정을 해주지않으면 부모에게서 받는 props가 변경되지 않았더라도 기본으로 리렌더링)

 

DOM

웹 페이지나 웹 앱에 있는 HTML 요소들을 트리형태로 표현한 것이다.

DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다.

여기에는 Web Document에 있는 각 UI 요소에 대한 노드가 포함된다.

 

Virtual DOM

1. 리엑트의 가상돔은 실제 DOM과 같은 내용을 담고 있는 복사본.

2. 자바스크립트 객체 형태로 메모리상에 저장되어 있다.

3. 리엑트는 항상 두 개의 가상돔을 갖고 있다.

4. 첫째 가상돔은 변경 이전의 내용을 담고 있고, 두 번째 가상돔은 변경 이후에 내용을 담고 있다.

5. 리액트는 두 개의 가상 돔을 비교해서 바뀐 부분만을실제 DOM에 한번에 적용시켜준다. 

 

https://alreadyusedadress.tistory.com/357

[기술면접] React, 기타 면접 대비

 

 

React 사용 이유

1. 컴포넌트 단위로 구성하여 조합, 분해하기 쉽다.

2. 로직과 뷰를 분리하여 구분하기 쉽다.

3. 가상 DOM을 활용하기 때문에 화면이 자주 바뀌는 경우 렌더링 자원을 아낄 수 있다.

 

class, function 컴포넌트 차이

=작업중=

 

React JSX

1. JS의 확장 문법

2. XML과 비슷하게 생겼다.

3. 이러한 코드는 브라우저에서 실행 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS 형태의 코드로 변환.

4. 공식적인 자바스크립트 문법은 아니다.

5. 반드시 부모 요소 하나로 감싸야 한다.

=작업중=

 

React 성능 향상?

- useCallback

  메모이제이션된 함수를 반환.

  메모이제이션 : 기존에 수행한 연산의 결과값을 저장해 두고 필요할 때 재사용.

  의존성 배열이 변하지 않는 이상 component가 리렌더링 될 때 마다 변수에 같은 함수 할당.

 

- React.memo

  기본적으로 얕은 비교를 사용하여 props 비교

  props로 렌더링이 자주 일어나는 경우라면 React.memo가 적절

 

- useMemo

  메모이제이션된 값을 반환.

  메모이제이션 : 기존에 수행한 연산의 결과값을 저장해 두고 필요할 때 재사용.

  

 

Context API?

1. context api는 상태 관리 도구가 아니다.(상태 관리 자체는 직접 관리)

2. '' 는 전역적으로 상태를 공유해주는 기능만 수행.  ( Redux는 상태관리까지 )

3. 리렌더 이슈 (Redux는 리렌더 이슈 자동 해결)

 

Redux

 

Redux toolkit

store 안의 작은 스토어 Slice

 

 

 

-수정중-