[React.js] Quiz_0902

 

Q.

 

> 객관식

문제 1: React에서 컴포넌트를 함수형 컴포넌트로 작성할 때 주로 사용하는 것은 무엇인가요?

• A) render 함수
• B) 클래스(class)
• C) useState와 useEffect 같은 훅(Hooks)
• D) componentDidMount

문제 2: React의 JSX에서 JavaScript 표현식을 HTML 요소 내부에서 사용할 때 사용하는 구문은 무엇인가요?

• A) ( )
• B) [ ]
• C) { }
• D) < >

문제 3: 다음 중 React의 상태 관리 라이브러리가 아닌 것은?

• A) Redux
• B) Context API
• C) Vuex
• D) Recoil

문제 4: React에서 컴포넌트가 처음으로 DOM에 삽입될 때 호출되는 생명주기 메서드는 무엇인가요? (클래스형 컴포넌트 기준)

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

문제 5: React에서 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용하는 것은 무엇인가요?

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

 

> 주관식

 

문제:

React에서 useEffect 훅은 여러 번 사용될 수 있습니다. 컴포넌트가 마운트될 때, 업데이트될 때, 그리고 언마운트될 때 각각의 경우에 useEffect 훅을 어떻게 구성할 수 있는지 설명하세요.

 

 

 

 

 

A.

 

 

> 객관식

 

문제 1: React에서 컴포넌트를 함수형 컴포넌트로 작성할 때 주로 사용하는 것은 무엇인가요?

• 정답: C) useState와 useEffect 같은 훅(Hooks)
• 설명: 함수형 컴포넌트에서는 useState, useEffect 등의 훅을 사용하여 상태와 생명주기 메서드를 처리할 수 있습니다.

문제 2: React의 JSX에서 JavaScript 표현식을 HTML 요소 내부에서 사용할 때 사용하는 구문은 무엇인가요?

• 정답: C) { }
• 설명: JSX에서는 중괄호 {}를 사용하여 JavaScript 표현식을 HTML 요소 내부에서 사용할 수 있습니다.

문제 3: 다음 중 React의 상태 관리 라이브러리가 아닌 것은?

• 정답: C) Vuex
• 설명: Vuex는 Vue.js의 상태 관리 라이브러리로, React와는 관련이 없습니다. Redux, Context API, Recoil은 React에서 사용하는 상태 관리 도구입니다.

문제 4: React에서 컴포넌트가 처음으로 DOM에 삽입될 때 호출되는 생명주기 메서드는 무엇인가요? (클래스형 컴포넌트 기준)

• 정답: B) componentDidMount
• 설명: 클래스형 컴포넌트에서 componentDidMount는 컴포넌트가 처음으로 DOM에 마운트될 때 호출되는 생명주기 메서드입니다.

문제 5: React에서 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용하는 것은 무엇인가요?

• 정답: B) props
• 설명: props는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 방법입니다. 자식 컴포넌트에서는 props를 통해 전달된 데이터를 읽을 수 있습니다.

 

 

> 주관식

 

 

• 마운트될 때 (componentDidMount):
  • useEffect(() => { /* 실행할 코드 */ }, []);
  • dependency array를 빈 배열로 설정하면, 이 useEffect는 컴포넌트가 처음 마운트될 때 한 번만 실행됩니다.
• 업데이트될 때 (componentDidUpdate):
  • useEffect(() => { /* 실행할 코드 */ }, [dependency]);
  • dependency array에 특정 변수를 넣으면, 해당 변수가 변경될 때마다 이 useEffect가 실행됩니다. 이는 componentDidUpdate와 유사한 역할을 합니다.
• 언마운트될 때 (componentWillUnmount):
  • useEffect(() => { return () => { /* cleanup 코드 */ }; }, []);
  • useEffect 내부에서 반환된 함수는 컴포넌트가 언마운트되기 직전에 실행됩니다. 이를 통해 자원 해제, 이벤트 리스너 제거 등 필요한 정리 작업을 수행할 수 있습니다.