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;
<button onClick={() => alert(name)}>Button
-> < button onClick={alert(name)}>Button 이렇게 바꿔준다면
버튼을 눌렀을 때 알람이 뜨는것이 아니라 텍스트를 입력하면 알람이 뜬다.
const handleClick = () => {
alert(name);
}; 버튼을 눌렀을 때 작동하는 함수를 정의함
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;
togglespopup의 실행 할 조건문을 만들고
버튼을 눌렀을 때, onClick을 통해 조건문이 실행될 수 있게 넣어준다
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>
);
}