[React.js] Quiz

 

Q.

 

 

> 객관식

문제 1: React의 가상 DOM(Virtual DOM)과 실제 DOM(DOM) 차이는 무엇인가요?

• A) 가상 DOM은 브라우저에서 실제로 렌더링됩니다.
• B) 가상 DOM은 메모리 상에서만 유지되며, 실제 DOM 변경 전에 차이를 계산합니다.
• C) 가상 DOM은 클래스 컴포넌트에서만 사용됩니다.
• D) 실제 DOM은 메모리 상에서 유지됩니다.

문제 2: React에서 상태(state)와 속성(props)의 차이는 무엇인가요?

• A) 상태는 컴포넌트 내부에서 관리되며, 속성은 부모 컴포넌트에서 전달됩니다.
• B) 속성은 컴포넌트 내부에서 관리되며, 상태는 부모 컴포넌트에서 전달됩니다.
• C) 상태는 변경될 수 없으며, 속성은 변경될 수 있습니다.
• D) 상태와 속성은 동일한 개념입니다.

문제 3: React Hook 중에서 컴포넌트가 마운트될 때 한 번만 실행되는 Hook은 무엇인가요?

• A) useState
• B) useEffect
• C) useContext
• D) useMemo

문제 4: 다음 중 React 컴포넌트가 재렌더링되는 이유가 아닌 것은?

• A) 상태(state) 변화
• B) 속성(props) 변화
• C) 부모 컴포넌트가 재렌더링됨
• D) 컴포넌트 파일의 코드 주석 추가

문제 5: React에서 키(key) 속성을 사용하는 주요 이유는 무엇인가요?

• A) 스타일을 적용하기 위해
• B) 요소를 고유하게 식별하고 효율적으로 렌더링하기 위해
• C) 데이터 전달을 위해
• D) API 호출을 위해

 

> 주관식

 

React의 useEffect 훅(Hook)은 주로 어떤 상황에서 사용되며, 이 훅을 사용할 때 주의해야 할 사항은 무엇인가요?

 

 

 

 

A.

 

 

 

문제 1: React의 가상 DOM(Virtual DOM)과 실제 DOM(DOM) 차이는 무엇인가요?

• 정답: B) 가상 DOM은 메모리 상에서만 유지되며, 실제 DOM 변경 전에 차이를 계산합니다.
• 설명: 가상 DOM은 메모리 상에 존재하는 가벼운 DOM 객체로, 실제 DOM과의 차이를 비교(diffing)하여 효율적으로 변경 사항만 실제 DOM에 반영합니다.

문제 2: React에서 상태(state)와 속성(props)의 차이는 무엇인가요?

• 정답: A) 상태는 컴포넌트 내부에서 관리되며, 속성은 부모 컴포넌트에서 전달됩니다.
• 설명: 상태(state)는 컴포넌트 내부에서 관리되고, props는 부모 컴포넌트로부터 전달되어 변경되지 않는 값입니다.

문제 3: React Hook 중에서 컴포넌트가 마운트될 때 한 번만 실행되는 Hook은 무엇인가요?

• 정답: B) useEffect
• 설명: useEffect는 두 번째 인자로 빈 배열 []을 주면, 컴포넌트가 마운트될 때 한 번만 실행됩니다.

문제 4: 다음 중 React 컴포넌트가 재렌더링되는 이유가 아닌 것은?

• 정답: D) 컴포넌트 파일의 코드 주석 추가
• 설명: 코드 주석은 실행에 영향을 주지 않으므로 컴포넌트의 재렌더링을 유발하지 않습니다.

문제 5: React에서 키(key) 속성을 사용하는 주요 이유는 무엇인가요?

• 정답: B) 요소를 고유하게 식별하고 효율적으로 렌더링하기 위해
• 설명: key 속성은 리스트의 각 요소를 고유하게 식별해주며, React가 어떤 항목이 변경, 추가, 제거되었는지를 빠르게 파악할 수 있게 도와줍니다.

 

React의 useEffect 훅(Hook)은 주로 어떤 상황에서 사용되며, 이 훅을 사용할 때 주의해야 할 사항은 무엇인가요?

 

React의 useEffect 훅은 Class 컴포넌트의 생명주기 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount를 대체하는 역할을 합니다.

핵심 포인트:

• useEffect는 기본적으로 컴포넌트가 마운트될 때, 업데이트될 때, 그리고 언마운트될 때 실행될 수 있습니다.
• 두 번째 인자로 빈 배열 []을 주면 컴포넌트가 처음 마운트될 때만 실행되며, 이는 Class 컴포넌트의 componentDidMount와 유사합니다.
• 배열 안에 특정 값을 넣으면 그 값이 변경될 때마다 useEffect가 실행되어, componentDidUpdate와 같은 역할을 합니다.
• useEffect 내에서 반환되는 함수는 컴포넌트가 언마운트되기 전이나 다음 useEffect가 실행되기 전에 호출되어, componentWillUnmount와 같은 역할을 수행합니다.