.jpg)
Q. 개념과 장점, 그리고 컴포넌트란 무엇인가요?
-
개념
사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다. -
장점
virtual DOM을 사용해서 어플리케이션의 성능을 향상 시킨다.
서버, 클라이언트 사이드 렌더링 지원이 가능하다.
컴포넌트의 가독성이 높고 간단하여 유지보수가 쉽다.
다른 프레임워크와 혼용도 가능하다. -
컴포넌트
레고 블록과 같이 작은 단위로 만들어서 그것들을 조립하듯이 개발하는 방법. 캡슐화, 확장성, 결합성, 재사용성과 같은 장점이 있다.
Q. 리액트의 내부 작동 원리를 설명하세요.
Q. 재조정 (Reconciliation) 개념에 대해서 설명하세요.
React는 Virtual DOM을 활용해 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 즉 동적으로 데이터가 변화했을 때 직접적으로 DOM을 조작하는 것이 아니라 DOM의 사본이라고 할 수 있는 새로운 Virtual DOM을 생성한다. 그리고 새로 생성된 Virtual DOM과 이전에 저장된 Virtual DOM을 비교해 변경된 부분의 DOM 만을 변경한다. 이 과정을 조화 과정(reconciliation)이라고 한다.
이 때 virtual DOM을 갱신하는 방법은 setState() 메서드를 호출하는 방법과, Redux의 경우처럼 store가 변하면 다시 최상위 컴포넌트의 render() 함수를 호출해서 갱신하는 2가지 방법이 있다.
Q. 리액트에 있는 라이프사이클과 각 라이프사이클의 역할을 설명하세요.
- componentDidMount() : 최초로 컴포넌트 객체가 생성될 때 한 번 수행
- componentDidUpdate() : 컴포넌트의 속성 값 또는 상태값이 변경되면 호출
- componentWillUnmount() : 이 컴포넌트가 소멸될 때 호출
- render() : 초기에 화면에 그려줄 때, 그리고 업데이트가 될 때 호출
Q. Class Component의 생명주기 메소드에 대해서 설명하세요.
Q. 리액트 라우터같은 Client Side Routing 에 대해서 설명하세요.
- 웹 페이지의 렌더링이 클라이언트 (브라우저) 측에서 일어나는 것.
- 내부에서 Routing 하기 때문에 해당 페이지를 호출 시 root 부터 해당 페이지까지 차례로 로딩.
- 서버와 클라이언트 간의 데이터 트래픽이 감소하고 렌더링이 한번만 있기 때문에 페이지 이동이 빠르다는 장점이 있지만,
SEO(검색최적화) 사용은 불가하다는 단점. - 보안 관련해서는 쿠키에 사용자 정보를 저장해야 해서 위험 요소가 될 수 있다.
Q. state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세요.
state는 immutable(불변성)을 유지해야하기 때문이다.
리액트에서는 props나 state의 값이 바뀌면 화면이 다시 그려지는 렌더링이 일어나게 된다. 이런 componet의 state는 setState를 이용해서 바꾸어야 한다. 직접 값을 바꾸게 되면 리액트가 render 함수를 호출하지 않아 렌더링이 되지않는 경우도 있어 setState를 통해서 바꾸는 것만 렌더링이 된다. 즉 이 말은 setState를 통해 바꿔야만 화면에 표시된다는 말이다.
Q. Props Drilling 이란 무엇인가요?
props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다.
Q. 리액트 Hooks의 장점은 무엇인가요?
-
로직의 재사용 가능, 관리가 쉽다.
- 함수형 컴포넌트이므로 함수 안에서 다른 함수를 호출하며 새로운 Hook을 만들 수 있다.
-
로직을 한 곳으로 모을수 있어서 가독성이 좋다.
Q. Class Component와 Function Component의 차이점에 대해서 설명하세요.
- 클래스형 컴포넌트
- state를 가지고 있어 상태 변화에 대한 관리를 할 수 있다.
- 단계별로 라이프 사이클을 경험할 수 있고, 라이프 사이클 API를 사용할 수 있다.
- 여러 단계의 상속으로 인해 전반적으로 복잡성과 오류 가능성이 증가.
- stateful component
- 함수형 컴포넌트
- 클래스형 컴포넌트에 비해 선언하기가 간편하여 주로 화면을 그리는 역할을 한다.
- 메모리 자원을 클래스형 컴포넌트 보다는 덜 사용한다.
- state와 라이프사이클 API 사용이 불가능 하다.
- 클래스형 함수에서의 복잡성, 재사용성의 단점들까지 해결.
- stateless component
Q. virtual DOM이 무엇인가요? virtual DOM이 좋은 이유에 대해서 설명하세요.
Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 하며 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아진다.
브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거친다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정역시 20회 다시 이루어 진다. 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하된다.
Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달한다.
따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 된다.
Q. JSX가 무엇인가요?
JSX의 확장 문법으로 React 엘리먼트를 생성하는 언어. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능.
Q. 웹 성능 향상을 위해 최적화를 해 본 경험이 있나요? 혹은 useMemo와 useCallback 메소드를 활용해 최적화하는 원리에 대해서 설명하세요.
useMemo는 렌더링을 할 때마다 메모리가 많이 소모되는 값은 계산하지 않고 functional components를 최적화하는데 도움을 준다. dependency 리스트를 생성해 그 중 하나가 변경되면 바로 값을 계산한다.
// useMemo를 사용한 예제
import React, { useMemo } from "react";
const computeValueFromProp = (prop) => {
// 에너지가 많이 소모되는 계산이 일어남
}
const ComponentThatRendersOften = ({ prop1, prop2 }) => {
const valueComputedFromProp1 = useMemo(() => {
return computeValueFromProp(prop1)
}, [prop1]);
// prop1이 변경될 때만 값을 계산
return (
<>
<div >{valueComputedFromProp1}</div>
<div >{prop2}</div>
</>
);
};useCallback도 useMemo와 비슷합니다. useMemo는 값을 기억하는 대신 useCallback은 함수를 기억합니다.
Q.React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해서 설명하세요.
React는 상태를 immutable 하게 변경하기 때문에 상태 객체의 주소값이 변경되면 상태가 변화되었다는 것을 알아챌 수 있다.
Q. 여러가지 상태 관리 라이브러리(Apollo, Redux, MobX 등)의 차이점에 대해서 설명하세요.
- Redux
- Flux개념(디스패처(Dispatcher), 스토어(Store), 뷰(View))을 바탕으로한 React에서 현재 가장 많이 사용되는 State 관리 라이브러리.
- Flux 아키텍처의 가장 큰 특징으로는 '단방향 데이터 흐름(unidirectional data flow)'을 들 수 있다. 데이터의 흐름은 언제나 디스패처(Dispatcher)에서 스토어(Store)로, 스토어에서 뷰(View)로, 뷰에서 액션(Action)으로 다시 액션에서 디스패처로 흐른다.
- REST API를 사용하기 때문에 리소스의 크기가 서버에서 결정된다. 데이터 교환이 복잡하게 이루어지고, 엔드포인트 증가 및 overfetching과 underfetching 등의 문제점이 있다.
- Flux와 Redux
-
MobX
- redux와 다르게 store에 제한이 없다.
- 기본적으로 객체지향 느낌이 강하다.
- redux에서 해줘야했던 action 선언, connect, mapStateToProps, mapDispatchToProps등 번거로운 작업들은 데코레이터로 간단하게 대체한다.
- Typescript를 기반으로 만들어졌다.
-
Apollo
- GraphQL을 기반으로 한다.- 서버에서는 어떠한 자원을 사용할 수 있는지 정의하고, 클라이언트에서 렌더링에 필요한 데이터를 요청하는 방식이기 때문에 꼭 필요한 데이터 교환하여 효율적이다.
- Apollo Client는 Redux와 무엇이 다른가
Q. useEffect 메소드로 componentWillUnmount 가 동작할 수 있는 방법에 대해서 설명하세요.
useEffect 코드 내부에서 return 하는 익명 함수를 작성하는 방법으로 componentWillUnmount를 구현할 수 있다.
useEffect(() => {
console.log('컴포넌트가 화면에 나타남');
return () => {
console.log('컴포넌트가 화면에서 사라짐');
};
}, []);