<JS> probs, states

states 갱신 (이벤트 객체)

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

체크박스 값을 변경하면 isChecked 값이 onChange를 통해 seIsChecked로 전환되어야한다.
handleChecked는 '이벤트헨들러' 로서 이벤트가 작동할 수 있게 해준다.

function CheckboxExample() {
  console.log("rerendered?");
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

import "./styles.css";
import React, { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleClick = () => {
    alert(name);
  };
  return (
    <div className="App">
      <h1>Event handler practice</h1>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={handleClick}>Button</button>
      <button onClick={() => alert(name)}>Button</button>
      <h3>{name}</h3>
    </div>
  );
}
export default NameForm;

codePen 링크

<button onClick={() => alert(name)}>Button
-> < button onClick={alert(name)}>Button 이렇게 바꿔준다면
버튼을 눌렀을 때 알람이 뜨는것이 아니라 텍스트를 입력하면 알람이 뜬다.

const handleClick = () => {
alert(name);
}; 버튼을 눌렀을 때 작동하는 함수를 정의함

Action item 2 : Pop up

Pop up 역시 Pop up 의 open 과 close 를 state 를 통해 관리할 수 있습니다. 이 예제 또한 useState 를 확인하여 버튼 클릭에 따라 하단의 이미지와 같이 Pop up 이 open/close 되도록 코드를 완성하세요.

import React, { useState } from "react";
import "./styles.css";

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

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

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      {/* 버튼을 클릭했을 때 Pop up 의 open/close 가 작동하도록
          button tag를 완성하세요. */}
      <button className="open" onClick={togglePopup}>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>
  );
}

export default App;

codePen 링크

togglespopup의 실행 할 조건문을 만들고
버튼을 눌렀을 때, onClick을 통해 조건문이 실행될 수 있게 넣어준다

Action item 3: Controll component

import "./styles.css";
import React, { useState } from "react";

export default function App() {
const [username, setUsername] = useState("");
const [msg, setMsg] = useState("");

return (
<div className="App">
<div>{username}</div>
<input
type="text"
value={username}
-----------------------------컨트롤 컴포넌트 -----------------------
onChange={(event) => setUsername(event.target.value)}
-----------------------------컨트롤 컴포넌트 -----------------------
placeholder="여기는 인풋입니다."
className="tweetForm__input--username"
></input>
<div>{msg}</div>
{/* TODO : 위 input과 같이 입력에 따라서 msg state가 변할 수 있게 
아래 textarea를 변경하세요. */}
<textarea
placeholder="여기는 텍스트 영역입니다."
-----------------------------컨트롤 컴포넌트 -----------------------
onChange={(event) => setMsg(event.target.value)}
-----------------------------컨트롤 컴포넌트 -----------------------
className="tweetForm__input--message"
></textarea>
</div>
);
}

codePen 링크