질문 목차

• DOM에 대해 설명해 주세요.
• Virtual DOM에 대해 설명해 주세요.
• 클래스형 컴포넌트와 함수 컴포넌트의 차이를 설명해 주세요.
• React의 장점과 단점
• JSX에 대해 설명해 주세요.
• 브라우저는 JSX 파일을 읽을 수 있나요?
• state와 props의 차이를 설명해 주세요.
• 자식 컴포넌트에서 props를 변경할 수 있나요?

DOM에 대해 설명해 주세요.

DOM이란 Document Object Model로, 서버로부터 받은 HTML 파일을 파싱해서 트리 형태를 구조화한 객체입니다. DOM을 통해 문서에 대한 내용을 알 수 있고 웹 구성 요소를 조작할 수 있습니다.

Virtual DOM에 대해 설명해 주세요.

가상 돔이란 실제 DOM의 가벼운 복사본이며 변경사항이 생기면 기존 DOM을 비교하여 변경된 부분만 업데이트를 해줍니다. 또한 가상 돔은 DOM 업데이트를 한꺼번에 모아서 렌더링해주기 때문에 UI의 빠른 화면 업데이트를 해줍니다.

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

클래스형 컴포넌트

- state와 라이프사이클 메서드 사용가능
- this 키워드를 사용해 메서드에 접근 가능

함수 컴포넌트

- 리액트 훅의 도입으로 state와 라이프사이클 메서드 사용 가능
- 간결하고 가독성이 높다
- 클래스형 컴포넌트보다 메모리 소비가 적고 성능면에서 더 우수하다

React의 장점과 단점

장점

- 리액트는 컴포넌트 기반이라 재사용성이 높다
- 리액트는 화면 업데이트가 간결하다 (선언형 프로그래밍)
- 리액트는 화면 업데이트가 빠르다 (Virtual DOM)

단점

- 리액트는 View만 담당하기 때문에 라우팅, 비동기 처리, 상태관리 등을 직접 구현해야 한다.

JSX에 대해 설명해 주세요.

JSX는 JavaScript와 HTML을 결합하여 UI 코드를 쉽고 효율적으로 작성할 수 있는 자바스크립트 확장 문법입니다. React.js에서 처음 도입되었지만 현재는 다른 프레임워크에서도 사용되고 있습니다.

JSX를 쓰기 위한 규칙으로는 {js}, 최상위 코드 1개, 닫힌 태그, className, style (카멜케이스로 변경), 주석 등이 있습니다. 이 규칙을 지킨다면 JSX로 코드 가독성 향상, 개발 속도 향상의 이점을 얻을 수 있습니다.

- 코드 가독성 향상: JSX는 UI 코드를 HTML과 유사한 형태로 작성하여 가독성을 높입니다.
- 개발 속도 향상: JSX는 HTML과 JavaScript를 동시에 사용할 수 있어 개발 속도를 높입니다.

브라우저는 JSX 파일을 읽을 수 있나요?

브라우저는 JSX 파일을 직접 읽을 수는 없습니다. JSX는 브라우저에서 실행되기 전에 JSX 컴파일러인 Babel과 같은 도구를 사용하여 JavaScript로 변환되어야 합니다.

재조정 개념에 대해서 설명해 주세요.

상태 변화가 있을 때 새로운 Virtual DOM을 생성하여 현재 DOM과 비교한 후 차이가 있는 곳을 감지하여 실제 DOM에 업데이트 시켜 주는 과정입니다.

state와 props의 차이를 설명해 주세요.

state는 컴포넌트에서 component의 생명주기 동안 사용되거나 변경될 수 있는 정보를 담고 있는 자바스크립트 객체이다. setState나 useState를 통해 state를 바꿀 수 있습니다.

반면, props는 부모 컴포넌트에서 자식 컴포넌트에게 값을 상속할 수 있는 읽기 전용 객체입니다.

자식 컴포넌트에서 props를 변경할 수 있나요?

네 변경 가능합니다. props는 읽기 전용 객체이기 때문에 자식 컴포넌트에서 state를 직접적으로 변경하기 어렵지만, 부모 컴포넌트로 부터 해당 state를 변경하는 setState 함수를 props로 전달받아 해당 함수를 호출하면 props 값을 변경할 수 있습니다