React props& state [퀴즈]

1. a. 이벤트 종류를 설정할 때 PascalCase로 설정해야 한다.
   -> 이벤트 이름을 설정할 때 camelCase로 설정해야 한다.
   d. 이벤트 핸들러는 props로 전달할 수 없다.
   -> 이벤트 핸들러는 props로 전달할 수 있다.

2. react에서 component간 데이터를 전달하는 방법으로 옳은것은?
   -> props

3. a. useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 한다.
   b. useState를 사용하여 새로운 state를 선언할 때 { count, setCount}라고 선언해야 한다.
   -> 주로 배열[]로 구조 분해 할당하여 사용한다.

4. 나의 새 트윗

function Tweet(props) {
return

} -> props.children은 props의 특별한 속성으로, 컴포넌트의 여는 태그와 닫는 태그 사이의 내용을 포함한다.

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

{plusNumber} 혹은
{() => setNumber(number=> number + 1)}
A,D. onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달해야 합니다. 따라서 A,D가 정답입니다.

import React, {useState} from "react";
function App(){
    const [showPopup, setShowPopup] = useState(false);

    const togglePopup = () =>{
        if(showPopup===false){
             setShowPopup(true)
        }else{
            setShowPopup(false)
        }
    };

    return(
        <div className="App">
         <h1>FIX ME TO OPEN POP UP</h1>
    <button className="open" onClick={togglePopup}>Open me</button>
    <div className="popup">
        <div className="popup__inner">
        <h2>success!</h2>
    <button className="close" onClick={togglePopup}>
        close me</button>
        </div>
        </div>
    ) : null}
</div>
    );
}

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