๐ ๊ฐ๋ฐ ๊ณต๋ถ 1๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต ๋ธ๋ก๊ทธ๐๏พ Aug 16 ~ 20, 2021
ํ์ฌ ์ํ
https://yeri-kim.github.io/posts/react-event/
input
์ ๊ธ์๋ฅผ ์
๋ ฅํ ๋๋ง๋ค ๊ฐ๋ฐ์๋๊ตฌ Console tab์ ์ฐํ๋ codecode 1, 2, 3 ๋ชจ๋ ๊ฒฐ๊ณผ ๋์ผ
code 1
function showText(e){
console.log(e.target.value)
}
return (
<div>
<input type="text" onChange="{showText}" />
</div>
);
discription
input
taginput
์ value์ด๋ฏ๋ก input ์์์ ์์ฑํ ๊ฐ์ด valuecode 2
// function ๋ถ๋ถ์ ์ญ์
return (
<div>
<input type="text" onChange={e => {
console.log(e.target.value);
}}
/>
</div>
);
code 3
// ๋ค์ function ๋ถ๋ถ์ ํ์ฉ
function showText(txt){
console.log(txt)
}
return (
<div>
<input type="text" onChange={e => {
const txt = e.target.value;
showText(txt);
}}
/>
</div>
);
discription
function showText(txt)
console.log(txt)
const txt = e.target.value;
showText(txt);
code 4, 5, 6, 7 ๋ชจ๋ ๊ฒฐ๊ณผ ๋์ผ
code 4
// DOM ์ฌ์ฉ
let name = "Mike";
function changeName() {
name = name === "Mike" ? "Jane" : "Mike";
consoel.log(name);
document.getElementById("name").innerText = name;
}
return (
<div>
<h2 id="name">{name}</h2>
<button onClick={changeName}>Change</button>
</div>
);
discription
innerText
) ๋ฅผ name
์ผ๋ก ๋ณ๊ฒฝcode 5
// useState ์ฌ์ฉ
import { useState } from "react";
export default function Hello() {
const [name, setName] = useState("Mike");
function changeName() {
const newName = name === "Mike" ? "Jane" : "Mike";
setName(newName);
}
return(
<div>
<h2 id="name">{name}</h2>
<button onClick={changeName}>Change</button>
code 6
import { useState } from "react";
export default function Hello() {
const [name, setName] = useState("Mike"); // ๋ฐฐ์ด ๊ตฌ์กฐ๋ถํด
function changeName() {
setName(name === "Mike" ? "Jane" : "Mike");
}
return(
<div>
<h2 id="name">{name}</h2>
<button onClick={changeName}>Change</button>
code 7
import { useState } from "react";
export default function Hello() {
const [name, setName] = useState("Mike");
return(
<div>
<h2 id="name">{name}</h2>
<button onClick={() => {
setName(name === "Mike" ? "Jane" : "Mike");
}}
>
Change</button>
</div>
code 8, 9, 10 ๋ชจ๋ ๊ฒฐ๊ณผ ๋์ผ
code 8
import { useParams } from "react-router-dom";
export default function Day() {
const a = useParams();
const day = a.day;
const wordList = mockdata.words.filter(word => word.day === day);
code 9
import { useParams } from "react-router-dom";
export default function Day() {
const day = useParams().day;
const wordList = mockdata.words.filter(word => word.day === day);
code 10
import { useParams } from "react-router-dom";
export default function Day() {
const {day} = useParams();
const wordList = mockdata.words.filter(word => word.day === day);
code 11 ในใ
ใ
ในใ
https://www.youtube.com/watch?v=iCdcSti70lI&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=11
https://www.youtube.com/watch?v=SMKRXZljBt8&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=12