🫐

REACT 질문

생성일

2021/09/29 10:06

태그

React 한정 질문

질문모음

갤러리 보기

Table

REACT 질문

컴포넌트를 통한 프로젝트 구성, 단방향 데이터 바인딩?

왜 DOM 조작이 비효율적인데?

<자바스크립트 엔진은 계속해서 성능이 좋아지고 있는데, 정확히 어떤 부분 때문에 DOM 이 느려지는거야?> 자바스크립트 엔진이 계속해서 성능이 좋아지는거랑, DOM이랑 무슨 상관인데?

DOM 조작이 비효율적인 것이 아니라, 그 이후에 일어나는 일 때문에 비효율적인것이다.

브라우저의 워크플로우가 어떻게 이뤄지는지 살펴보고 DOM 조작 후 어떤일이 일어나는지 대해서 알아보자 브라우저의 워크플로우가 뭔데?

Virtual DOM은 무엇인가요?

React의 경우, Reconciliation을 사용합니다.React의 Reconciliation은 변경 전과 변경 후의 엘리먼트 노드에 대해 디핑(diffing) 비교 알고리즘을 수행합니다.

하지만 일반적의 경우 디핑 알고리즘은 O(n^3)의 시간복잡도를 가지고 있으며, React에 이 알고리즘을 적용한다면, 1000개의 엘리먼트 노드에 대해 알고리즘을 수행할 경우 10억 번의 비교연산을 수행해야합니다.

React는 대신 다음 두 가지 가정을 기반하여 O(n)의 시간복잡도를 가지는 휴리스틱 알고리즘을 구현했습니다.

서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.

개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해줄 수 있다.

이러한 처리로, 일반 디핑 알고리즘에 비해 현저히 낮은 비용으로 비교 및 UI 렌더링이 가능하다.

Virtual DOM은 트리가 변경되었는지 어떻게 비교를 하나요?

프로젝트의 특성에 따라 합리적인 기술 스택과 컨벤션을 선택하기위해 프레임워크에 대한 고민이 생긴다. JavaScript 기반 프레임워크인 React, Angular, Vue.js에 대해 기본적인 기술을 깊게 이해하고 프레임워크 간의 차이와 각각의 장단점을 이해해보자.

Angular와 React는 Front-End 개발자에게 가장 널리 사용되는 JavaScript 프레임 워크 중 하나입니다.

React, Angular, Vue.js 모두 JavaScript와 웹을 기반으로 하기 때문에 이를 프레임워크로 접근하기보다는 기본적인 기술을 깊게 이해하고 프레임워크 간의 차이와 각각의 장단점을 이해해보자.

React

Angular, React의 차이는 무엇이 있나요?

한마디로 제어 컴포넌트와 비제어 컴포넌트의 차이를 말하자면 State로 input 값을 관리(변경)할 수 있는가의 여부 차이이다. 제어 컴포넌트는 관리를 할 수 있고, 비제어 컴포넌트는 관리를 할 수 없다.

리액트 개념에 의해 관리되는 것이 제어 컴포넌트이고 그렇지 않은 것이 비제어 컴포넌트이다.

두개의 컴포넌트의 각각의 특징이 명확하므로 상황에 따라 적절한 컴포넌트를 사용하면 좋을 것이라고 생각한다. 리엑트 공식문서에 의하면 대부분 경우에 폼을 구현하는데 제어 컴포넌트를 사용하는 것을 추천한다.

Controlled Component (제어 컴포넌트)

제어 컴포넌트에서 폼 데이터는 React컴포넌트에서 다루어진다.

제어 컴포넌트는 컴포넌트의 상태나 속성(props)으로 주어진 값을 활용하는 컴포넌트입니다.

제어 컴포넌트와 비제어 컴포넌트의 차이는 무엇인가요?

Hook : 함수 컴포넌트에서 React state와 생명주기 기능을 “연동(hook into)“할 수 있게 해주는 함수

훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다.훅을 통해서 함수형 컴포넌트에서도 컴포넌트의 상태값을 관리할수도, 컴포넌트의 생명 주기 메소드또한 이용할 수 있게 해줍니다.

useRef 란?

.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환

React에서 Ref는 Reference의 줄임말이며 DOM 요소를 참조한다

useRef에 대해 설명해주세요.

하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트입니다.

렌더링 도중인 Life Cycle에서 에러/예외가 발생한다면 애플리케이션 중단(모든 컴포넌트가 언마운트)된다. 이는 잘못된 정보를 사용자에게 보여주는 것보다 아무것도 안 보여주는 것이 더 나은 UX이기 때문이다.

이에 대한 해결책이자 방지책이 에러 바운더리이다.

해결 및 방지책(Error Boundary 적용)

static getDerivedStateFromError와 componentDidCatch를 활용하여 에러를 처리할 수 있다.

에러가 발생한다면, 위에 두 메서드를 구현한 가장 가까운 부모 컴포넌트를 찾는다.

클래스 컴포넌트와 함수형 컴포넌트의 차이는 무엇인가요? 그리고 함수형 컴포넌트의 장점은?

key는 무엇이고, 어떻게 사용되나요?

왜 state를 직접 변경하지 않고 setState를 이용하나요(useState)?

useEffect에 대해 설명해주세요.

useCallback에 대해 설명해주세요.

useMemo에 대해 설명해주세요.

메모이제이션에 대해 설명해주세요.

prop으로 전달되는 값의 type을 어떻게 강제하나요? prop이 필수적으로 전달되게끔 어떻게 강제하나요?

state와 props의 차이는 무엇인가요?

prop drilling은 무엇이고 어떻게 피할 수 있나요?

Context-API에 대해서 설명하세요.

React의 상태관리가 무엇인지 설명해주세요

Redux와 Mobx는 무엇이고, Redux를 사용한다면 어떤 이유인가요?

Redux-saga와 옵저버블에 대해 설명해주세요.

Redux 미들웨어 중 Thunk Saga의 차이는 무엇이 있나요?

React 애플리케이션을 스타일링(styling)하는 보편적인 방식은 무엇인가요?

React에서 생명주기(lifecycle) 메소드는 무엇인가요?