React State & Props 종합 퀴즈 풀이

 

문제1. React에서 이벤트를 처리하는 방식으로 옳은 것을 고르세요.

A.이벤트 종류를 설정할 때 PascalCase로 설정해야 한다.
B.이벤트에 전달하는 값은 함수여야 한다.
C.이벤트 핸들러를 설정할 때 반드시 호출연산자 ()를 이용해서 바로 함수를 호출해야 한다.
D.이벤트 핸들러는 props로 전달할 수 없다.

A. React에서는 이벤트 이름을 camelCase로 작성해야 합니다.
예를 들어 onClick, onChange 등이 일반적입니다. PascalCase는 잘못된 형식입니다.

B. 이벤트에 전달하는 값은 함수여야 한다.
JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.

C. React에서는 이벤트 핸들러를 설정할 때 함수를 호출하지 않고 함수 자체를 전달해야 합니다. 예를 들어 onClick={this.handleClick} 이러한 방식으로 작성해야 합니다. 호출연산자 ()를 이용해서 바로 호출하면 이벤트가 발생할 때마다 함수가 호출되기 때문에 이벤트가 발생하지 않아도 함수가 호출되어 성능상 문제가 발생할 수 있습니다.

D. React에서는 이벤트 핸들러를 props로 전달할 수 있습니다. 이벤트 핸들러를 props로 전달하면 구성 요소 간 이벤트를 쉽게 공유할 수 있습니다.

---

문제2. React에서 Component 간 데이터를 전달하는 방법으로 옳은 것을 고르세요.

A. setState
B. state
C. Props
D. Route

A. setState는 구성 요소의 state를 변경하는 기능입니다.

B. state는 구성 요소 내부에서 관리하는 값입니다.

C. Props
React에서 Component 간 데이터를 전달하는 방법 중 하나는 props를 사용하는 것입니다. Props는 구성 요소를 정의할 때 선언하며, 해당 구성 요소를 사용하는 곳에서 전달할 수 있습니다. 예를 들어 <ChildComponent name={'John'} /> 이렇게 전달 할 수 있습니다.

D. Route는 React Router라이브러리를 사용해서 페이지를 구성하는 방법입니다.

 

---

문제3. useState에 대한 설명으로 틀린 것을 고르세요.

A. useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다.
B. useState를 사용하여 새로운 state를 선언할 때 { count, setCount } 라고 선언해야 한다.
C. useState의 전달인자는 state의 초깃값이다. useState의 전달인자는 하나만 전달할 수 있다.
D. useState가 반환하는 두 번째 요소는 첫 번째 요소인 state를 갱신할 수 있는 함수이다.

 

A. useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다. 
useState는 React Hooks의 하나로 함수 컴포넌트에서 state를 사용할 수 있도록 해줍니다.

B. useState를 사용하여 새로운 state를 선언할 때 { count, setCount } 라고 선언해야 한다.
useState는 일반적으로 배열 비구조화 할당(array destructuring assignment)을 사용하여 state 변수와 그 값을 변경하는 함수를 반환합니다. 예를 들어, const [count, setCount] = useState(0) 같은 형식으로 선언할 수 있습니다. 그러나, 이름을 달리해도 무관하고 선언만 해도 무관합니다.

C. useState의 전달인자는 state의 초깃값이다. useState의 전달인자는 하나만 전달할 수 있다.
useState는 초기 state를 전달인자로 받습니다. 그리고 전달인자는 여러개 전달 가능하다.

D. useState가 반환하는 두 번째 요소는 첫 번째 요소인 state를 갱신할 수 있는 함수이다.
useState는 첫 번째 요소로 현재 state를, 두 번째 요소로 state를 갱신할 수 있는 함수를 반환합니다.

---

문제4. 

<Tweet>나의 새 트윗</Tweet>

위와 같은 방법으로 컴포넌트를 사용한다고 가정할 때, "나의 새 트윗"이라는 문자열을 div 태그 안쪽에 출력하기 위해 빈칸에 작성해야 할 코드는?

function Tweet(props) {
return
<div>{ _________ }</div>
}

A.props.textContent

B.props.children

C.Tweet.textContent

D.Tweet.children

A. props.textContent
전달받은 props에서 textContent 속성을 참조하는 것이므로 전달된 "나의 새 트윗" 문자열을 출력하지 않을 것.

B. props.children
function Tweet(props) {
return <div>{props.children}</div>
}

C. Tweet.textContent
Tweet 함수 자체의 textContent 속성을 참조하는 것이므로 전달된 "나의 새 트윗" 문자열을 출력하지 않을 것.

D. Tweet.children
마찬가지로 Tweet 함수 자체의 children 속성을 참조하는 것이므로 전달된 "나의 새 트윗" 문자열을 출력하지 않을 것.

---

문제5. 

const Hello = (props) => <div>{props.name}</div>

위과 같이 구현한 Hello 컴포넌트가 있습니다. name이라는 props를 전달하는 방법으로 잘못된 것을 고르세요

A.

function Say() {
  return ( 
    <Hello name="walli" />
  )
}

B.

const Say = () => <Hello name={"walli"} />

C.

function Say() {
  const name = "walli";
  return <Hello name={name} />;
}

D.

function Say() {
  const props = {
    name: "walli"
  };
  return <Hello {...props} />;
}

E.

const Say = () => <Hello props={name: "walli"} />

 

A. 함수형 컴포넌트를 사용하여 Hello 컴포넌트를 호출하고, name props를 "walli"라는 값으로 전달합니다.

function Say() {
  return ( 
    <Hello name="walli" />
  )
}

 

B. 화살표 함수를 사용하여 Hello 컴포넌트를 호출하고, name props를 "walli"라는 값으로 전달합니다.

const Say = () => <Hello name={"walli"} />

 

C. 함수형 컴포넌트를 사용하여 Hello 컴포넌트를 호출하고, name 변수를 선언하여 name props를 "walli"라는 값으로 전달합니다.

function Say() {
  const name = "walli";
  return <Hello name={name} />;
}

 

D. 함수형 컴포넌트를 사용하여 Hello 컴포넌트를 호출하고, props 객체를 선언하여 name props를 "walli"라는 값으로 전달합니다.

function Say() {
  const props = {
    name: "walli"
  };
  return <Hello {...props} />;
}

E.
E가 틀렸습니다. props를 전달할 때는 속성 값으로 값을 전달하는 것이 아니라, 속성으로 전달해야 하기 때문이입니다.
틀린 이유는 props={name: "walli"} 이렇게 표현하면 객체로 인식하여 전달되지 않고, 그냥 객체가 전달됩니다.
제대로 작동하려면 <Hello name="walli" /> 이렇게 전달하면 됩니다.

const Say = () => <Hello props={name: "walli"} />

---

문제6. 
제품 목록 및 가격을 확인하고, 그 중 재고가 있는 제품만 확인할 수 있는 작은 웹 애플리케이션이 있습니다. 이 애플리케이션에 제공되는 제품 데이터는 서버로부터 전달받고 있습니다. 이 애플리케이션을 리액트로 만들었을 때, state 가 되어야 하는 데이터를 고르세요. (정답 2개)

A.제품 이름
B.사용자가 입력한 검색어
C.체크박스의 값
D.제품 가격

서버로부터 전달받는 데이터는 state가 될 수도 있고, props로 전달받을 수도 있습니다. state는 컴포넌트 내부에서 사용되는 데이터를 의미하며, 컴포넌트 내부에서 변경될 수 있습니다. 하지만 props는 컴포넌트 밖에서 전달받은 데이터를 의미하며, 컴포넌트 내부에서 변경될 수 없습니다. 그러므로 서버로부터 전달받는 데이터가 컴포넌트 내부에서 변경될 경우 state로 처리하고, 변경되지 않을 경우 props로 처리하면 됩니다.

 

A. 제품 이름
제품 이름은 서버로부터 전달받은 데이터로, 사용자가 입력하지 않는다. 즉, 이 데이터는 고정되어 있고, 사용자가 제품 이름을 선택하여 제품 목록을 필터링 할 수 있도록 하는 기능을 구현할 때 state로 관리해야 합니다.

B. 사용자가 입력한 검색어
사용자가 입력한 검색어는 서버로부터 전달받지 않는다. 즉, 이 데이터는 사용자가 입력하는 값으로, 사용자가 입력한 검색어를 통해 제품 목록을 필터링 할 수 있도록 하는 기능을 구현할 때 state로 관리해야 합니다.

C. 체크박스의 값
체크박스의 값은 사용자가 선택하는 값으로, 사용자가 선택한 값을 통해 제품 목록을 필터링 할 수 있도록 하는 기능을 구현할 때 state로 관리해야 합니다.

D. 제품 가격
제품 가격은 state로 설정할 수 없는 것입니다. 이 정보는 서버로부터 전달받은 정보이므로 앱에서 관리할 필요가 없습니다. 앱에서는 가져온 정보를 그대로 사용하면 됩니다. 하지만 사용자의 액션에 따라 변화하는 값들, 예를 들어 사용자가 입력한 검색어나 체크박스의 값은 state로 관리해야합니다. 이를 state로 관리하면 앱의 동작을 제어할 수 있습니다.

---

문제7. 
다음은 <select> 요소를 이용해 변경한 옵션에 따라 화면에 렌더링 되는 글자를 바꿔주는 코드입니다. 선택한 과일의 이름이 제대로 렌더링 될 수 있도록 빈 칸을 채워보세요.

import React, { useState } from "react";

function SelectFruit() {
  const [choice, setChoice] = useState("apple");

  const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];
  const options = fruits.map((fruit, idx) => {
    return <option key={idx} value={fruit}>{fruit}</option>;
  });
  const handleFruit = (event) => {
		setChoice(_____________); // 해당 빈칸을 채우기
  };

  return (
    <div className="container">
      <select onChange={handleFruit}>{options}</select>
      <h3>You choose "{choice}"</h3>
    </div>
  );
}​

 

setChoice(event.target.value);

*Unit6 - [React] React State & Props Chapter1-3. 이벤트 처리 튜토리얼 Action item 1 : <select> 

---

문제8. 빈 칸이 알맞게 채워진 답을 모두 고르세요.

import React, { useState } from "react";

const App = () => {
	const [number, setNumber] = useState(0);
	
	const plusNumber = () => setNumber(number + 1);
	const minusNumber = () => setNumber(number - 1);

	return(
		<div className="App">
			<h1>{number}</h1>
			<button onClick=___________>Plus</button>
			<button onClick={minusNumber}>Minus</button>
		</div>
	);
};​

A. {plusNumber}

B. {plusNumber()}

C. {() => plusNumber}

D. {() => setNumber(number=> number + 1)}

A. {plusNumber}
plusNumber 함수를 onClick 이벤트에 바인딩 하려면 onClick={plusNumber} 형식으로 입력해야 합니다. 이렇게 하면 버튼을 클릭할 때마다 plusNumber 함수가 실행되며 setNumber(number + 1) 로 number 값이 1 증가합니다.

B. {plusNumber()} 는 잘못된 작성입니다. 이렇게 작성하면 plusNumber 함수가 즉시 실행되어 setNumber 함수를 호출하지 않습니다. A, C, D 중 올바른 작성입니다. A는 함수 객체를 전달하며, C는 함수를 호출하는 화살표 함수를 전달하며, D는 같은 기능을 하는 화살표 함수를 전달합니다.

C. {() => plusNumber}
onClick={() => plusNumber} 은 함수를 리턴하는 화살표 함수를 전달하는 것이기 때문에 원하는 대로 작동하지 않을 수 있습니다.
익명함수가 화살표 함수 형태로 배치되어 있습니다. 이에 따라, Plus 버튼을 클릭 했을 때 plusNumber 함수가 리턴될 뿐 호출되지는 않습니다.

D. {() => setNumber(number=> number + 1)}
onClick={plusNumber} 대신에 {() => setNumber(number=> number + 1)} 을 사용할 수 있습니다.
이렇게 사용할 경우, 클릭시 호출되는 함수에서 setNumber() 함수를 직접 호출하는 것이 아니라, 클릭 핸들러 함수를 통해 호출되는 익명 함수에서 setNumber() 함수를 호출하게 됩니다. 하지만 이렇게 사용하면 성능상의 이슈를 야기할 수 있으며, 코드를 이해하기 어렵게 만들수 있으니 주의 해야 합니다.

---

문제9. togglePopup 핸들러 함수는 button.open 엘리먼트를 클릭했을 때 작동하는 함수입니다. 이 함수가 showPopup 상태를 변경할 수 있도록 빈칸이 알맞게 채워진 답을 고르세요.

import React, { useState } from "react";

function App() {
  const [showPopup, setShowPopup] = useState(false);

  const togglePopup = () => {
    // Pop up 의 open/close 상태에 따라
    // 현재 state 가 업데이트 되도록 함수를 완성하세요.
    if(1._______ === false) {
      2._______ (true)
    } else {
      2._______ (false)
    }
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      {/* 버튼을 클릭했을 때 Pop up 의 open/close 가 작동하도록
          button tag를 완성하세요. */}
      <button className="open" 3._______ >Open me</button>
      {showPopup ? (
        <div className="popup">
          <div className="popup_inner">
            <h2>Success!</h2>
            <button className="close" onClick={togglePopup}>
              Close me
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

 

A. 1.setShowPopup, 2.showPopup, 3.onClick={togglePopup}

B. 1.showPopup, 2.setShowPopup, 3.onClick={togglePopup}

C. 1.open, 2.close, 3.onClick={togglePopup}

D. 1.showPopup, 2.setShowPopup, 3.onClick={open}

B. showPopup, 2.setShowPopup, 3.onClick={togglePopup}

1. showPopup은 현재 Pop up 의 open/close 상태를 관리하는 state 입니다.
2. setShowPopup은 state를 업데이트 하는 함수입니다.
3. onClick={togglePopup} 은 button 태그를 클릭했을 때 togglePopup 함수가 실행되도록 합니다.
4. if(1.showPopup === false) { 2.setShowPopup (true) } else { 2.setShowPopup (false) } <button className="open" 3.onClick={togglePopup} >Open me</button> 처럼 작성되어야 합니다.

A번 선택지는 1번에 setShowPopup, 2번에 showPopup, 3번에 onClick={togglePopup} 이므로 틀렸습니다.
B번 선택지는 1번에 showPopup, 2번에 setShowPopup, 3번에 onClick={togglePopup} 이므로 정답입니다.

1번에는 togglePopup 함수에서 사용될 state를 저장하는 것이고, 2번에는 state를 변경하는 함수를 적용하는 것이고, 3번에는 togglePopup 함수를 호출하는 event를 설정하는 것이니 B번 선택지가 정답이라고 할 수 있습니다.

*Unit6 - [React] React State & Props 챕터3-1 듀토리얼 마지막 [코드] State Hook 2 실습 참조.