3.27 종합퀴즈

💁‍♀️ React에서 이벤트를 처리하는 방식으로 옳은 것을 고르세요.

A. 이벤트 종류를 설정할 때 PascalCase로 설정해야 한다

B. 이벤트에 전달하는 값은 함수여야 한다.

C. 이벤트 핸들러를 설정할 때 반드시 호출연산자 ()를 이용해서 바로 함수를 호출해야 한다.

D. 이벤트 핸들러는 props로 전달할 수 없다.

 

🔈 해설

정답 B

 

A. 이벤트 이름을 설정할 때 camelCase로 설정해야 합니다. onclick은 onClick, onchage는 onChange와 같이 해야 적용됩니다.

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

C. onClick={handleIncrease()}와 같이 진행하게 된다면, 리턴 값이 onClick으로 전달되어서 함수 자체가 전달되는 것이 아니라, 함수의 결괏값이 전달됩니다. 또한, 렌더링할 때마다 해당 함수가 호출되기 때문에 성능 이슈가 우려됩니다. [공식 문서]

D. 이벤트 핸들러는 props로 전달할 수 있습니다.

 

 

---

💁‍♀️ React에서 Component 간 데이터를 전달하는 방법으로 옳은 것을 고르세요.

A. setState

B. state

C. Props

D. Route

 

🔈 해설

정답 C

React에서는 Component 간 데이터 전달할 때는 Props를 사용하여 전달합니다.

 

---

💁‍♀️ useState에 대한 설명으로 틀린 것을 고르세요.

A. useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다.

B. useState를 사용하여 새로운 state를 선언할 때 { count, setCount } 라고 선언해야 한다.

C. useState의 전달인자는 state의 초깃값이다. useState의 전달인자는 하나만 전달할 수 있다.

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

 

🔈 해설

정답 B

A. useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다.

B. useState를 사용해 새로운 state를 선언할 때, 주로 배열([])로 구조 분해 할당하여 사용합니다.

대괄호가 의미하는 것은 무엇일까요? - 공식 문서 자바스크립트 문법의 "배열 구조 분해"라는 특별한 방법으로 변수를 선언했습니다. 0이나 1로 배열에 접근하는 것보다, 구조 분해 할당으로 변수 이름을 정해주는 것이 더 가독성이 좋습니다.

C. useState() 의 전달인자는 useState 가 반환하는 배열의 첫 번째 요소에 넘겨주는 초기 상태 값입니다.

D. useState가 반환하는 배열의 두 번째 요소는 첫 번째 요소인 state를 갱신할 수 있는 함수입니다.

 

---

💁‍♀️

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

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

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

 

A. props.textContent

B. props.children

C. Tweet.textContent

D. Tweet.children

 

🔈 해설

정답 B

모든 컴포넌트에서 children prop을 이용해서 진행할 수 있습니다.

props.children은 props의 특별한 속성으로, 컴포넌트의 여는 태그와 닫는 태그 사이(HTML content 자리)의 내용을 포함합니다.

자세한 내용 공식 문서를 참고하세요.

 

---

💁‍♀️

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"} />

 

🔈 해설

정답 E

A. 함수 선언식

B. 함수 표현식

C. name 이라는 변수에 값을 할당하여 전달하는 방식입니다.

D. props 라는 변수에 값을 할당 후, spread syntax를 이용하여 전달했습니다. {name:"wailli"}를 전달받는 것을 확인할 수 있습니다.

만약 props 자체를 전달하면 어떻게 뜨나요? <Hello {props}> 라고 쓰게 되면 SyntaxError: /src/App.js: Unexpected token, expected "..." 에러가 발생하면서 "..." 를 활용하길 권장하고 있습니다. 혹은 별도의 props의 이름을 지정해서 전달해야 합니다.

E. Syntax Error가 납니다. props의 이름은 사용될 context 가 아닌 컴포넌트 자체의 관점에서 짓는 것을 권장합니다.

 

---

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

(정답 2개)

A. 제품 이름

B. 사용자가 입력한 검색어

 

C. 체크박스의 값

D. 제품 가격

 

🔈 해설

정답 B, C

 

이 웹 애플리케이션에서 변할 수 있는 데이터와 변할 수 없는 데이터를 구분해 봅시다. 사용자가 입력하고자 하는 검색어는 언제든지 바뀔 수 있습니다. 포테토칩을 검색할 수도 있고, 오레오를 검색할 수도 있기 때문입니다. 재고가 있는 품목만 보여주는 체크박스도 "재고가 있는 품목만 보여주기", "모두 보여주기" 두 가지 상태가 있습니다.

이렇게 컴포넌트에서 state를 정할 때는 어떤 데이터가 변할 수 있는지, 상태가 존재해야 하는지 고민하고, state를 지정해 줘야 합니다.

A. 제품 목록에서 이름, 가격 그리고 재고 여부는 서버로부터 받아오는 정해진 데이터입니다. 사용자 입력과 체크박스의 값에 의해 변경되지 않기 때문에 state가 아닙니다.

B & C. 검색어(input)와 체크박스(check 여부)는 state로 볼 수 있습니다. 사용자 활동에 의해 인풋 값이나 체크박스의 상태를 변경할 수 있기 때문입니다.

D. 제품 가격은 사용자 입력이나 체크박스의 값에 영향을 받지 않습니다. 그렇기 때문에 state로 볼 수 없습니다.

 

---

💁‍♀️ 다음은 <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>
  );
}

 

🔈 해설

정답 event.target.value

해설

<select> 태그는 Form 엘리먼트의 하나로 사용자의 입력값을 제어하는 데 주로 사용됩니다. React에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리하고 업데이트를 합니다.

우선, <select> 태그의 옵션을 선택하면 onChange 이벤트가 발생하고 그에 따라 해당 이벤트에 할당되어 있는 handleFruit 핸들러 함수가 호출됩니다. 이때, handleFruit 핸들러 함수의 역할은 선택된 과일로 state를 갱신 시켜주는 일을 합니다. 즉, 선택된 과일이 state 변수에 담겨 갱신됩니다.

이 때, handleFruit 핸들러 함수는 onChange 이벤트의 event 객체를 인자로 받아 사용할 수 있습니다. 여기서, event.target.value가 바로 해당 옵션의 값이 됩니다. 이벤트 객체에는 발생한 이벤트에 대한 모든 정보가 담겨있습니다. 그 중 target 속성에는 이벤트가 발생한 엘리먼트에 대한 정보가 담겨있습니다. 그래서 target.value 에서 선택된 옵션의 값을 확인할 수 있습니다.

즉, setChoice(state 갱신함수)가 호출되어 choice의 값이 바뀌게 되면 React는 페이지를 렌더링하고 <h3> 태그의 내용이 event.target.value의 값으로 리렌더링되어 바뀝니다.

 

---

💁‍♀️ 빈 칸이 알맞게 채워진 답을 모두 고르세요.

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, D

A,D. onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달해야 합니다. 따라서 A,D가 정답입니다.

B. 함수를 바로 호출할 경우 컴포넌트가 렌더링 될 때 함수 자체가 아닌 함수 호출의 결과가 onClick에 적용됩니다. 때문에 버튼을 클릭할 때가 아닌, 컴포넌트가 렌더링 될 때에 plusNumber 가 실행되기 때문에 무한으로 페이지가 렌더링 되게 됩니다.

C. 익명함수가 화살표 함수 형태로 배치되어 있습니다. 이에 따라, Plus 버튼을 클릭 했을 때 plusNumber 함수가 리턴될 뿐 호출되지는 않습니다.

 

---

💁‍♀️ 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

버튼 클릭에 따라 Pop up이 열고 닫히기 위해서는 버튼을 눌렀을 때 togglePopup 함수가 호출 되어야 합니다. 따라서 onClick 이벤트 처리로 togglePopup 함수를 넣어줘야 합니다. 그래서 3번은 onClick={togglePopup} 입니다.

또한 버튼 클릭에 따라 state 저장변수인 showPopup의 상태가 바뀌어야 합니다. state 저장변수가 갱신되기 위해서는 state 갱신함수인 setShowPopup 을 호출해야 합니다.

showPopup의 초깃값이 false 이므로 true로 바꿔 주기 위해 setShowPopup 에 true 를 넣어 호출합니다. 다시 Pop up 창을 닫기 위해서는showPopup 을 false 로 바꿔주기 위해 setShowPopup 에 false 를 넣어 호출합니다. 따라서 1번은 showPopup 이 2번은 setShowPopup 이 됩니다.

 

---