[React] 초급 퀴즈1 - 리액트 기본 개념과 JSX

리액트의 기본 개념과 JSX에 대한 이해를 확인하는 퀴즈입니다. 아래 문제를 풀어보세요!

---

 

 

🧩 1. 리액트의 주요 특징 중 틀린 것은 무엇인가?

1. 컴포넌트 기반으로 UI를 구성한다.
2. 가상 DOM을 사용하여 성능을 최적화한다.
3. 양방향 데이터 흐름을 기본으로 제공한다.
4. 선언형 UI 패턴을 따른다.

---

 

 

🧩 2. JSX에 대한 설명 중 옳지 않은 것은?

1. JSX는 JavaScript 내에서 HTML을 작성할 수 있는 문법이다.
2. JSX는 반드시 React.createElement()로 변환된다.
3. JSX 내에서 JavaScript 표현식을 사용하려면 {}를 사용해야 한다.
4. JSX에서 class 속성을 사용할 수 있으며, className으로 변경할 필요가 없다.

---

 

 

🧩 3. 다음 JSX 코드가 JavaScript 코드로 변환되었을 때 올바른 것은?

const element = <h1>Hello, React!</h1>;

1. const element = React.createElement("h1", null, "Hello, React!");
2. const element = document.createElement("h1"); element.innerText = "Hello, React!";
3. const element = new HTMLElement("h1"); element.innerText = "Hello, React!";
4. const element = createElement("h1", "Hello, React!");

---

 

 

🧩 4. JSX에서 올바른 문법을 고르세요.

1. <div class="container">Hello</div>
2. <div class=container>Hello</div>
3. <div className="container">Hello</div>
4. <div classname="container">Hello</div>

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

🏆 정답 및 해설

✅ 1번 문제 정답: 3번 (양방향 데이터 흐름을 기본으로 제공한다.)

📌 해설: 리액트는 단방향 데이터 흐름을 기본으로 제공하며, 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐릅니다. 반면, 양방향 데이터 바인딩은 기본적으로 지원되지 않으며, 상태 관리를 위해 useState나 Redux 같은 라이브러리를 사용해야 합니다.

✅ 2번 문제 정답: 4번 (JSX에서 class 속성을 사용할 수 있으며, className으로 변경할 필요가 없다.)

📌 해설: JSX에서는 class 속성을 사용할 수 없습니다. 대신 className을 사용해야 합니다. 이는 class가 JavaScript에서 예약어로 사용되기 때문입니다. 따라서 올바른 JSX 문법을 따르려면 className="container" 형태로 작성해야 합니다.

✅ 3번 문제 정답: 1번 (const element = React.createElement("h1", null, "Hello, React!");)

📌 해설: JSX로 작성된 코드는 내부적으로 React.createElement()로 변환됩니다. 즉, <h1>Hello, React!</h1>는 React.createElement("h1", null, "Hello, React!") 형태로 변환되며, 가상 DOM을 통해 실제 DOM에 반영됩니다.

✅ 4번 문제 정답: 3번 (<div className="container">Hello</div>)

📌 해설: JSX에서는 HTML과 유사하지만 몇 가지 차이점이 있습니다. 그중 하나가 class 대신 className을 사용해야 한다는 점입니다. 또한 속성 값을 문자열로 지정할 경우, 반드시 큰따옴표(")로 감싸야 합니다. 따라서 <div className="container">Hello</div>가 올바른 문법입니다.

---