함수 컴포넌트 - 함수가 HTML을 반환한다

Q1. 함수 컴포넌트를 올바르게 정의한 것은?

function myCard() { return <div>카드</div>; } function MyCard() { return <div>카드</div>; } function MyCard() { print(<div>카드</div>); } MyCard = function() { return '<div>카드</div>'; }

💡 함수 컴포넌트의 이름은 반드시 대문자로 시작해야 합니다. 소문자로 시작하면 React가 HTML 태그로 인식합니다. 또한 JSX를 반환(return)해야 하며, 문자열이 아닌 JSX 형식이어야 합니다.

Q2. 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법은?

전역 변수(window 객체)를 사용한다 localStorage를 사용한다 Props(속성)를 통해 전달한다 자식이 부모의 state를 직접 접근한다

💡 React에서 데이터는 Props를 통해 부모에서 자식으로 전달됩니다. <UserCard name="홍길동" age={30} />처럼 HTML 속성처럼 작성하며, 자식 컴포넌트에서 props 매개변수 또는 구조분해할당으로 받습니다. 이것이 React의 단방향 데이터 흐름입니다.

Q3. 다음 중 Props에 대한 설명으로 올바르지 않은 것은?

부모에서 자식으로 전달된다 문자열, 숫자, 함수 등 어떤 값이든 전달 가능하다 자식 컴포넌트에서 props 값을 직접 수정할 수 있다 기본값(default value)을 설정할 수 있다

💡 Props는 읽기 전용입니다. 자식 컴포넌트에서 받은 props를 직접 수정하면 안 됩니다. 이것이 React의 단방향 데이터 흐름 원칙입니다. 값을 변경하려면 부모 컴포넌트에서 상태를 변경하고, 변경된 값을 다시 props로 전달해야 합니다.

Q4. useState에 대한 설명으로 올바른 것은?

useState는 전역 상태를 관리한다 setter 함수를 호출하면 해당 컴포넌트가 재렌더링된다 한 컴포넌트에서 useState는 한 번만 사용할 수 있다 useState는 클래스 컴포넌트에서만 사용 가능하다

💡 useState의 setter 함수(예: setCount)를 호출하면 React가 해당 컴포넌트를 재렌더링합니다. 한 컴포넌트에서 여러 번 useState를 사용할 수 있고, 함수 컴포넌트에서 사용하는 Hook입니다(클래스 컴포넌트에서는 this.setState를 사용).

Q5. 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트에 알리는 올바른 방법은?

자식이 부모의 상태를 직접 변경한다 부모가 이벤트 핸들러 함수를 props로 자식에게 전달하고, 자식이 호출한다 전역 변수를 사용해서 통신한다 자식이 부모를 import해서 함수를 호출한다

💡 React에서 자식이 부모에게 이벤트를 알리는 방법은 부모가 콜백 함수를 props로 전달하는 것입니다. 예를 들어 <Button onClick={handleClick}/>처럼 핸들러를 전달하면, 버튼 클릭 시 부모의 handleClick이 실행됩니다. 이것이 React의 역방향 데이터 흐름(Lifting State Up) 패턴입니다.

함수 컴포넌트 - 함수가 HTML을 반환한다

퀴즈 통과!

아쉽네요!