1. React의 원리, 특징, 장단점에 대해 설명해주세요.
-
React의 원리와 특징
- React는 JavaScript UI 라이브러리입니다.
- React에서 컴포넌트라고 불리는 개별 조각을 사용하여 사용자의 인터페이스를 구현할 수 있습니다.
- React는 컴포넌트의 상태값이 변경했을 때, Virtual DOM을 사용하여 변경된 부분의 UI만 효율적으로 업데이트해줍니다.
-
React의 장점
- 화면이 컴포넌트로 구성되어 있기 때문에 컴포넌트를 재사용하기 쉽고 유지보수하기 편리합니다.
- Virtual DOM을 통해 DOM 업데이트를 하므로 DOM 처리 회수를 최소화하여 업데이트 속도가 빠릅니다.
- React 커뮤니티가 크고 React와 관련된 다양한 라이브러리를 사용할 수 있습니다.
-
React의 단점
- React는 라이브러리이기 때문에 기본적인 기능 외에 필요한 기능을 사용하기 위해 직접 구현하거나 필요한 라이브러리를 설치해서 사용해야 합니다.
- 예를 들어 라우팅 처리를 위해 react-router-dom 라이브러리를 설치해야 합니다.
- React는 라이브러리이기 때문에 기본적인 기능 외에 필요한 기능을 사용하기 위해 직접 구현하거나 필요한 라이브러리를 설치해서 사용해야 합니다.
2. Virtual DOM이 무엇인지 설명해주세요.
- 실제 DOM 트리를 추상화한 JavaScript 객체를 말합니다.
- React는 Virtual DOM을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화합니다.
2.1 Virtual DOM의 작동 원리에 대해 설명해주세요.
- Virtual DOM은 UI 가상 표현을 메모리상에 두고 재조정 과정을 통해 실제 DOM과 동기화하는 것을 말합니다.
- UI가 변경되면, 전체 UI를 Virtual DOM에 리렌더링합니다.
- 현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산합니다.
- 변경된 부분을 실제 DOM에 적용합니다.
2.2 Virtual DOM을 비교하는 비교 알고리즘에 대해 설명해주세요.
- 이전 Virtual DOM과 현재 Virtual DOM을 비교할 때, root 요소부터 비교하고 그 후 자식 요소들을 재귀적으로 비교합니다.
- 두 요소를 비교할 때 요소의 타입이 서로 다르다면, 이번 트리를 버리고 새로운 트리를 구축합니다.
- 두 요소를 비교할 때 요소의 타입이 같다면, 두 요소의 속성을 비교하여 동일한 속성은 유지하고 변경된 속성만 갱신합니다.
3. JSX에 대해 설명해주세요.
- JSX는 JavaScript에 XML을 추가한 확장 문법입니다.
- React 컴포넌트는 React가 브라우저에 렌더링하는 일부 마크업을 포함할 수 있는 JavaScript 함수입니다.
- 이 때 React 컴포넌트는 JSX를 사용하여 해당 마크업을 표현합니다.
3.1 JSX의 규칙에 대해 설명해주세요.
- JSX는 하나의 root element를 반환해야 합니다.
- 컴포넌트에서 여러 개의 elements를 반환하는 경우, 하나의 부모 태그로 elements를 감싸주어야 합니다.
- JSX는 모든 태그를 명시적으로 닫아야 합니다.
- JSX에서 대부분의 HTML과 SVG 속성들은 camelCase로 작성됩니다.
4. Element와 Component의 차이에 대해 설명해주세요.
-
element는 화면에 표시할 내용을 DOM node나 다른 컴포넌트로 설명하는 일반 객체입니다.
- element는 property에 다른 element를 포함할 수 있습니다.
- element가 생성되면 절대 변하지 않습니다.
-
component는 마크업을 포함할 수 있는 JavaScript 함수입니다.
- component는 여러 방식으로 선언될 수 있습니다.
- class와 render 메서드와 함께 선언되거나 함수로 선언될 수 있습니다.
- component는 입력값을 props로 받고, element tree를 반환합니다.
5. React에서 Component를 어떻게 생성하나요?
- component는 여러 방식으로 선언될 수 있습니다.
- class와 render 메서드와 함께 선언되거나 함수로 선언될 수 있습니다.
6. Class Component를 사용해보셨나요?
- 아니요...
7. Class Component와 Function Component의 차이에 대해 설명해주세요.
- 클래스 컴포넌트는 constructor 함수 내부에서 상태를 초기화하는 반면에, 함수 컴포넌트는 useState 훅을 통해 상태를 초기화합니다.
- 클래스 컴포넌트는 render 함수를 통해 컴포넌트를 반환하는 반면에, 함수 컴포넌트는 return문을 통해 컴포넌트를 반환합니다.
- 클래스 컴포넌트는 라이프사이클 메서드를 통해서 생명 주기 동안 일어나는 로직을 구현하는 반면에, 함수 컴포넌트는 훅을 통해서 상태를 관리하고 생명 주기 동안 일어나는 로직을 구현합니다.
8. Lifecycle에 대해 설명해주세요.
- 컴포넌트가 생성되고 사용되고 소멸되기까지의 과정을 컴포넌트의 생명주기라고 합니다.
9. Lifecyle method에 대해 설명해주세요.
- 생명주기 메서드는 컴포넌트의 생명주기 동안 특정한 시점에 자동으로 호출되는 메서드를 말합니다.
- 생명주기 메서드는 componentDidMount, componentWillUpdate, componentWillUnmount가 있습니다.
- componentDidMount 메서드는 컴포넌트가 마운트되었을 때 호출됩니다.
- componentWillUpdate 메서드는 컴포넌트가 리렌더링되었을 때 호출됩니다.
- componentWillUnmount 메서드는 컴포넌트가 언마운트되기 전에 호출됩니다.
