🔸 React
- React의 대표적인 특징 중 선언형 프로그래밍은 무엇을 의미하는가?
: React는 선언형 프로그래밍 방식을 지향하고 있음, 선언형 프로그래밍이란 절차를 구체적으로 기술하지 않고 추상화시켜서 사용하는 방식
: 다만 명령형 프로그래밍 방식을 완전히 배제할 수 없기 때문에 필요하다면 부분적으로 명령형 프로그래밍 방식 사용
- React의 대표적인 특징 중 컴포넌트 시스템은 무엇을 의미하는가?
: 또한 React는 컴포넌트 기반으로 구현할 수 있음, 즉 작은 하위 컴포넌트 단위를 합쳐서 더 큰 상위 컴포넌트를 생성하고, 이를 바탕으로 템플릿, 페이지, 애플리케이션까지 확장하는 구조
: 이러한 구조는 아원자 단위부터 디자인을 설계하는 아토믹 디자인과도 상응하는 부분이 있으므로 디자인 분야와 협업하기 좋음
- React의 대표적인 특징 중 멀티 플랫폼 지원은 무엇을 의미하는가?
: React라는 하나의 API를 바탕으로 React DOM, React Native, Electron 등 어떤 API를 추가적으로 연결시키는지에 따라 웹 앱, 모바일 네이티브 앱, 데스크탑 앱을 다양하게 구현할 수 있음
- React의 엘리먼트와 컴포넌트는 각각 무엇이고 어떤 차이가 있는가?
: 엘리먼트는 DOM 노드를 불변 객체로 표현한 것
: 컴포넌트를 구성하는 요소가 엘리먼트, 컴포넌트는 UI를 재사용한 조각으로 나눈 것
- React의 컴포넌트에는 어떤 종류가 있고, 모던 React에서는 무엇을 주로 사용하는가?
: 클래스를 사용한 클래스 컴포넌트와 함수를 사용한 함수 컴포넌트로 나뉨
: 훅이 등장하기 전에는 상태 관리에 이점이 있는 클래스 컴포넌트 방식을 사용했으나, 훅 등장 이후 함수 컴포넌트와 훅을 조합하여 주로 구현함
- CDN 방식으로 React 라이브러리를
import할 때 버전 관리는 어떻게 할 수 있는가?: CDN
src중react뒤에@버전을 삽입하면 버전을 따로 지정하여import할 수 있음
ex)src="//unpkg.com/react@17/umd/react.development.js"
React.createElement메서드의 인수로는 무엇을 전달할 수 있는가?: 첫 번째 인수로 생성할 엘리먼트의 타입을 필수적으로 전달, 두 번째 인수로
props를 선택적으로, 세 번째 인수로 자식 노드를 선택적으로 전달할 수 있음
: 이 때 내부적으로props와 자식 노드를 병합하기 때문에props객체에 자식 노드를children프로퍼티로 포함하여 전달해도 무방함
- React DOM이란 무엇인가?
: React API로 생성한 엘리먼트를 바탕으로 DOM tree 구조를 구성하는 역할을 함
: 구체적으로ReactDOM.render메서드를 사용하여 DOM tree 구조를 구현할 수 있음
ReactDOM.render메서드의 인수로는 무엇을 전달할 수 있는가?: 첫 번째 인수로 컴포넌트(컴포넌트의 참조 값도 가능), 두 번째 인수로 컴포넌트를 병합할 실제 노드, 세 번째 인수로 렌더링 완료 후 호출할 콜백 함수를 전달할 수 있음
- React 18 버전 이후에는
ReactDOM.render대신 무엇을 사용하여 렌더링하는가?:
createRoot메서드를 사용하여 Root Node를 만들고, 그 루트 노드에render메서드를 사용하여 DOM에 렌더링
- 렌더링한 Root 노드를 DOM에서 해제하는 방법은 무엇인가?
:
unmount메서드를 사용하여 DOM에서 해제 가능
React.StrictMode는 왜, 어떻게 사용하는가?: React로 구현한 애플리케이션 내의 문제를 탐지하기 위한 컴포넌트로, 하위 컴포넌트들의 문제를 검사할 수 있음
: 다른 컴포넌트의 상위에서 포함하고 있다고 하여 컴파운드 컴포넌트라고 부르고, 따로 컴포넌트 트리에는 표시되지 않기 때문에 렌더링에 영향을 미치지 않음
- JSX를 Babel로 컴파일하기 위해서는 어떤 패키지를 설치해야 하는가?
:
@babel/preset-react를 따로 설치해야 컴파일이 가능함
- JSX 문법으로 작성한 파일을 Babel로 컴파일할 때 주의할 점은 무엇인가?
: ES 모듈 방식으로 로직을 분리한 경우, HTML 파일에
script태그로 명시한 진입점 파일만 Babel이 컴파일하고 그 파일에서import한 다른 모듈 파일까지는 컴파일하지 않기 때문에 오류가 발생할 수 있음
: 이러한 문제를 해결하기 위해@babel/preset-react등 적절한 패키지를 설치할 필요가 있음
