[React] 초급 퀴즈3 - props와 state의 차이

리액트에서 props와 state의 개념을 이해하고, 이 두 개념의 차이를 학습하는 퀴즈입니다. 아래 문제를 풀어보세요!

---

 

 

🧩 1. props에 대한 설명 중 틀린 것은 무엇인가?

1. props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다.
2. props는 자식 컴포넌트에서 직접 수정할 수 있다.
3. props는 컴포넌트의 재사용성을 높이는 데 기여한다.
4. props는 읽기 전용(immutable)이다.

---

 

 

🧩 2. state에 대한 설명 중 틀린 것은?

1. state는 컴포넌트 내부에서 관리되는 데이터이다.
2. state 값이 변경되면 컴포넌트가 다시 렌더링된다.
3. state는 부모 컴포넌트에서 자식 컴포넌트로 전달될 수 있다.
4. state는 setState 또는 useState를 사용하여 직접 변경할 수 있다.

---

 

 

🧩 3. 다음 코드 실행 결과로 올바른 것은?

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="React" />;
}

1. Hello, React!가 화면에 출력된다.
2. Hello, props.name!이 화면에 출력된다.
3. Hello, !가 화면에 출력된다.
4. 오류가 발생한다.

---

 

 

🧩 4. props와 state의 차이점으로 올바른 것은?

1. props는 변경할 수 있지만, state는 변경할 수 없다.
2. state는 부모에서 자식으로 데이터를 전달하는 데 사용된다.
3. props는 부모 컴포넌트가 자식 컴포넌트로 전달하는 데이터이며, state는 컴포넌트 내부에서 관리하는 데이터이다.
4. props와 state는 모두 컴포넌트 내부에서 직접 변경할 수 있다.

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

🏆 정답 및 해설

✅ 1번 문제 정답: 2번 (props는 자식 컴포넌트에서 직접 수정할 수 있다.)

📌 해설: props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이며, 읽기 전용입니다. 자식 컴포넌트에서 직접 수정할 수 없으며, 부모에서 새로운 값을 전달해야 합니다.

function Parent() {
  return <Child name="React" />;
}

function Child(props) {
  props.name = "Vue"; // ❌ 오류 발생
  return <h1>Hello, {props.name}!</h1>;
}

---

✅ 2번 문제 정답: 3번 (state는 부모 컴포넌트에서 자식 컴포넌트로 전달될 수 있다.)

📌 해설: state는 컴포넌트 내부에서 관리되는 데이터이며, 직접 변경할 수 있습니다. state를 부모에서 자식으로 전달하려면 props를 통해 전달해야 합니다.

function Parent() {
  const [count, setCount] = useState(0);
  return <Child count={count} />;
}

function Child(props) {
  return <h1>Count: {props.count}</h1>;
}

---

✅ 3번 문제 정답: 1번 (Hello, React!가 화면에 출력된다.)

📌 해설: Greeting 컴포넌트는 props.name 값을 받아 Hello, React!를 출력합니다. App 컴포넌트에서 Greeting에 name="React"를 전달했기 때문에 Hello, React!가 화면에 출력됩니다.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="React" />;
}

---

✅ 4번 문제 정답: 3번 (props는 부모 컴포넌트가 자식 컴포넌트로 전달하는 데이터이며, state는 컴포넌트 내부에서 관리하는 데이터이다.)

📌 해설: props는 부모에서 자식으로 전달되는 데이터이며 변경할 수 없습니다. 반면, state는 컴포넌트 내부에서 관리되며 변경할 수 있습니다.

function Example() {
  const [text, setText] = useState("Hello");
  return (
    <div>
      <h1>{text}</h1>
      <button onClick={() => setText("Updated")}>변경</button>
    </div>
  );
}

---