Quiz

[React.js] Quiz_0909

크라00 2024. 9. 9. 16:19

Q.

 

> 객관식

 

문제 1: React에서 컴포넌트 간 데이터를 전달하는 가장 일반적인 방법은 무엇인가요?

  • A) state
  • B) props
  • C) context
  • D) localStorage

문제 2: React에서 상태(state)를 관리할 때 함수형 컴포넌트에서 주로 사용하는 훅은 무엇인가요?

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

문제 3: React에서 키(key) 속성의 역할은 무엇인가요?

  • A) 컴포넌트의 스타일을 정의하기 위해
  • B) 컴포넌트의 상태를 공유하기 위해
  • C) 리스트에서 각 항목을 고유하게 식별하기 위해
  • D) 컴포넌트 간 데이터를 전달하기 위해

문제 4: React의 Context API를 사용할 때 주로 어떤 상황에서 사용하나요?

  • A) 리스트 항목을 반복할 때
  • B) 여러 컴포넌트 간에 전역 상태를 공유할 때
  • C) 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때
  • D) 컴포넌트를 렌더링할 때

문제 5: React에서 컴포넌트가 DOM에서 제거되기 직전에 호출되는 생명주기 메서드는 무엇인가요? (클래스형 컴포넌트 기준)

  • A) componentDidUpdate
  • B) componentDidMount
  • C) componentWillUnmount
  • D) shouldComponentUpdate

 

> 주관식

 

 

문제:

React의 useContext 훅은 어떤 상황에서 사용되며, 이를 사용하면 props drilling 문제를 어떻게 해결할 수 있는지 설명하세요.

 

 

 

A.

 

> 객관식

 

 

문제 1: React에서 컴포넌트 간 데이터를 전달하는 가장 일반적인 방법은 무엇인가요?

  • 정답: B) props
  • 설명: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 props를 사용합니다. state는 각 컴포넌트 내부에서 데이터를 관리할 때 사용됩니다.

문제 2: React에서 상태(state)를 관리할 때 함수형 컴포넌트에서 주로 사용하는 훅은 무엇인가요?

  • 정답: C) useState
  • 설명: useState는 함수형 컴포넌트에서 상태 관리를 위해 사용되는 가장 기본적인 훅입니다.

문제 3: React에서 키(key) 속성의 역할은 무엇인가요?

  • 정답: C) 리스트에서 각 항목을 고유하게 식별하기 위해
  • 설명: key는 React에서 리스트 항목을 고유하게 식별하기 위해 사용됩니다. 이는 효율적인 리렌더링을 돕기 위해 필요합니다.

문제 4: React의 Context API를 사용할 때 주로 어떤 상황에서 사용하나요?

  • 정답: B) 여러 컴포넌트 간에 전역 상태를 공유할 때
  • 설명: Context API는 전역 상태나 데이터를 여러 컴포넌트에서 쉽게 공유하기 위해 사용됩니다. 이를 통해 props drilling 문제를 해결할 수 있습니다.

문제 5: React에서 컴포넌트가 DOM에서 제거되기 직전에 호출되는 생명주기 메서드는 무엇인가요? (클래스형 컴포넌트 기준)

  • 정답: C) componentWillUnmount
  • 설명: componentWillUnmount는 컴포넌트가 DOM에서 제거되기 전에 호출되는 메서드로, 주로 정리 작업(cleanup)을 수행하는 데 사용됩니다.

 

 

> 주관식

 

 

  • useContext 훅: React의 Context API는 전역 상태나 데이터를 여러 컴포넌트에서 공유할 수 있도록 도와주는 도구입니다. useContext 훅은 Context API를 간단하게 불러와 사용할 수 있도록 합니다.
  • props drilling 문제 해결: props drilling이란 데이터를 전달할 때 부모에서 자식, 또 자식에서 그 아래 자식으로 계속해서 props를 넘겨주어야 하는 문제를 말합니다. 중간의 컴포넌트가 그 데이터를 필요로 하지 않더라도, 단지 전달하기 위해 props를 사용해야 하는 경우가 발생합니다.
    • 해결 방법: Context API와 useContext 훅을 사용하면, 중간 컴포넌트를 거치지 않고 필요한 컴포넌트에서 직접 데이터에 접근할 수 있습니다. 이를 통해 props drilling 문제를 해결할 수 있습니다.