React Interview 1

No.	Questions
1	React가 무엇이고 주요 특징은 무엇인가요?
2	React를 사용하는 이유에 대해서 설명해주세요.
3	JSX란 무엇이고 React에서 어떻게 사용되나요?
4	함수형 컴포넌트와 클래스형 컴포넌트의 차이에 대해서 설명해주세요.
5	pure component에 대해서 설명해주세요.
6	state와 props 차이점은 무엇인가?
7	state를 직접적으로 업데이트 하면 안되는 이유는? (useState 사용하는 이유)
8	key prop을 사용하는 이유는?
9	Virtual DOM이 무엇인가?
10	Virtual DOM이 어떻게 작동하는가?
11	제어 컴포넌트와 비제어 컴포넌트의 차이에 대해서 설명해주세요.
12	생명 주기 메서드에 대해서 설명해주세요.
13	useMemo와 useCallback에 대해서 설명해주세요.
14	React의 렌더링 성능 향상을 위해 어떻게 해야 하나요?
15	useEffect와 useLayoutEffect의 차이점을 설명해주세요.
16	Context API에 대해서 설명해주세요.
17	Redux를 사용하는 이유에 대해서 설명해주세요.
18	Redux의 장단점은?
19	Context API와 Redux 차이점은?
20	redux-saga와 redux-thunk의 차이점에 대해서 설명해주세요.

[React]

React가 무엇이고 주요 특징은 무엇인가요?

React는 사용자 인터페이스를 만들기 위한 오픈 소스 front-end JavasScript 라이브러리로, 특히 single-page application에 사용된다. 그리고 React는 다음과 같은 특징을 가진다.

RealDOM 조작 비용이 많이 든다는 점을 고려하여 RealDOM대신 VirtualDOM을 사용한다.
서버 사이드 렌더링을 지원한다.
단방향 데이터 흐름 또는 데이터 바인딩을 따른다.
- 단방향 데이터 흐름이란 부모로부터 자식으로만 데이터 전달이 가능한 것을 말한다. 이는 유지보수를 좀 더 편리하게 만들 수 있도록 해주는 역할을 한다.
재사용 가능/구성 가능한 UI 컴포넌트를 사용하여 뷰를 개발한다.

React를 사용하는 이유에 대해서 설명해주세요.

프레임워크를 사용할 경우 사용자 입장에서 데이터가 변할 때 페이지 리로딩이 일어나지 않기 때문에 UX(사용자 경험)가 더욱 향상되기 때문에 사용한다. 그 중 React를 사용하는 이유는 타 프레임워크에 비해 HTML, CSS, JS 정도만 알아도 간단히 배울 수 있고 대중성이 있으며 넓은 활용성을 가지고 있기 때문이다.

JSX란 무엇이고 React에서 어떻게 사용되나요?

JSX는 HTML처럼 보이는 코드를 작성할 수 있게 해주는 자바스크립트를 확장한 문법이다.

함수형 컴포넌트와 클래스형 컴포넌트의 차이에 대해서 설명해주세요.

함수형 컴포넌트 : state와 생명 주기 메서드 사용 불가능하지만 16.8버전 이후로 제공되는 Hook으로 해결할 수 있다. 클래스형 컴포넌트보다 선언하기 편하다.
클래스형 컴포넌트 : state와 생명 주기 메서드 사용 가능

pure component에 대해서 설명해주세요.

React.PureComponent는 React.Component와 비슷하다. 그러나 생명 주기 메서드 중 하나인 shouldComponentUpdate()를 쓸 때 차이점이 있다. React.Component는 props, state의 변경 여부를 신경 쓰지 않고 기본적으로 컴포넌트가 다시 렌더링되지만 React.PureComponent는 props와 state를 이용한 얕은 비교를 구현할 수 있다는 차이점이 있다.

state와 props 차이점은 무엇인가?

state와 props의 가장 중요한 차이점은 props는 부모 컴포넌트로부터 전달받지만, state는 컴포넌트에서 관리된다는 것이다. 컴포넌트는 props를 변경할 수 없지만, state는 변경할 수 있다.

state를 직접적으로 업데이트 하면 안되는 이유는? (useState 사용하는 이유)

state를 직접적으로 업데이트 하려고 하면 컴포넌트가 다시 렌더링되지 않기 때문이다. 대신 useState의 setState 함수를 이용해서 state의 값을 번경하면 state가 변경될 때마다 다시 렌더링이 된다.

key prop을 사용하는 이유는?

key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트이다. 이는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. 따라서 key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

Virtual DOM이 무엇인가?

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념이다. 이 과정을 재조정이라고 한다. 이는 실제 DOM에 필요한 최소한만 변경하기 때문에 효율성이 높다는 장점을 가지고 있다.

Virtual DOM이 어떻게 작동하는가?

데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 다시 렌더링 한다.
이전 Virtual DOM에 있던 내용과 현재의 내용을 비교해 차이가 계산된다.
계산이 완료되면 실제 DOM은 실제로 변경된 항목으로만 업데이트된다.

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

React는 두 가지 방식으로 form 입력을 처리하는데 제어 컴포넌트는 React에 의해 입력값이 제어되고 비제어 컴포넌트는 React에 의해 입력값이 제어되지 않는 것을 말한다. 또한, 제어 컴포넌트는 사용자 입력을 기반으로 state를 관리하고 update하기에 실시간으로 입력값이 동기화되지만 비제어 컴포넌트는 state로 값을 관리하지 않기 때문에 값이 바뀔 때마다 다시 렌더링하지 않으므로 실시간으로 동기화 되지 않는다.

생명 주기 메서드에 대해서 설명해주세요.

생명주기 메서드(Lifecycle method)는 컴포넌트의 각각의 단계에서 실행되는 커스텀 기능이다. 컴포넌트가 만들어지고 DOM에 삽입될 때(mounting), 컴포넌트가 업데이트될 때(updating) 및 컴포넌트가 DOM에서 마운트 해제될 때(unmounted) 혹은 제거될 때 사용할 수 있는 기능을 제공한다.

다음과 같은 대표적인 메서드가 존재한다.

Mounting : render(), constructor()
Updating : render()
Unmounting : componentWillUnmount()

useMemo와 useCallback에 대해서 설명해주세요.

둘다 메모이제이션 기법을 이용해 불필요한 렌더링 또는 연산을 제어하는 용도로 쓰인다. useMemo는 메모이제이션된 값을 반환하며 useCallback은 메모이제이션된 콜백을 반환한다.

React의 렌더링 성능 향상을 위해 어떻게 해야 하나요?

React가 번경된 DOM 노드만 업데이트하더라도 리렌더링에는 여전히 다소 시간이 걸리는데 이를 컴포넌트 렌더링을 생략해 재조정을 피하는 방법이 있다. 이를 위해 React는 React.memo()와 shouldComponentUpdate() 함수를 제공한다. React.memo()는 고차 컴포넌트이며 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, memo를 호출하고 결과를 메모이징하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있다. 또한, shouldComponentUpdate() 함수는 다시 렌더링이 시작되기 전에 실행되는 생명주기 함수인데 이를 쓰면 컴포넌트 렌더링을 무시함으로써 속도를 높일 수 있다.

고차 컴포넌트 : 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다.
컴포넌트 : props를 UI로 변환한다.

useEffect와 useLayoutEffect의 차이점을 설명해주세요.

useEffect는 컴포넌트들이 render와 paint된 후 비동기적으로 실행된다. paint된 후 실행되기 때문에, useEffect 내부에 DOM에 영향을 주는 코드가 있다면 사용자는 화면의 깜빡임을 보게 된다.
useLayoutEffect 컴포넌트들이 render된 후 동기적으로 실행되며, 그 이후에 paint가 된다. paint가 되기 전에 실행되기 때문에 DOM에 영향을 주는 코드가 있더라도 사용자는 화면 깜빡임을 보지 않는다.

Context API에 대해서 설명해주세요.

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 주로 전역 상태를 관리할 때 많이 사용한다.

Redux를 사용하는 이유에 대해서 설명해주세요.

프로젝트 규모가 커졌을 때는 컴포넌트의 개수가 늘어나 다루는 데이터도 늘어나고 그 데이터를 업데이트 하는 함수들도 늘어나게 된다. 따라서 유지 보수하기 힘들어지는 문제를 redux를 사용하면 상태 관리를 컴포넌트 밖에서 할 수 있기 때문에 상태 값을 컴포넌트에 종속시키지 않아 해결할 수 있다.

Redux의 장단점은?

장점
- 데이터 흐름이 단방향이라서 디버깅하기 쉽다.
- 데이터가 집중화되어 있어서 예측 가능하다.
단점
- 아주 작은 기능이라도 몇 개 파일(ex 액션)을 필수적으로 만들어야하기 때문에 코드량이 적지 않다.

Context API와 Redux 차이점은?

context는 상태값을 전달하고 공유해 컨텍스트 안에 포함된 모든 레벨에서 명시적으로 prop을 전달하지 않고, 어디서든 상태값에 접근 할 수 있는 방법을 제공한다. 반면에 Redux는 상태 관리를 하기에 상태 변경을 예측 가능하게 만든다.

redux-saga와 redux-thunk의 차이점에 대해서 설명해주세요.

redux-saga와 redux-thunk는 모두 비동기적으로 API를 호출하여 데이터를 가져오는 일과 같은 부수 효과를 쉽게 처리하기 위해서 사용한다. thunk는 객체 대신 함수를 생성하는 액션 생성 함수를 작성할 수 있게 해준다. saga는 특정 액션이 디스패치되었을 때 정해진 로직에 따라 다른 액션을 디스패치시키는 규칙을 작성할 수 있게 해준다. 그래서 saga는 좀 더 까다로운 상황에서 유용하다. 예를 들어 기존 요청을 취소 처리할 때나 API 요청 실패 시 재요청해야 할 때가 있다. 또한, saga는 제너레이터 함수 문법을 기반으로 비동기 작업을 관리한다.

미들웨어를 사용하면 리듀서가 액션이 디스패치된 다음 리듀서에서 해당 액션을 처리하기 전에 추가적인 작업을 할 수 있다.

출처 :

Twitter Facebook LinkedIn

권기영

Front End