๐ React Codes
๐ ๊ฐ๋ฐ ๊ณต๋ถ 1๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต ๋ธ๋ก๊ทธ๐๏พ Aug 16 ~ 20, 2021
ํ์ฌ ์ํ
https://yeri-kim.github.io/posts/react-event/
๐ฅ input
์ ๊ธ์๋ฅผ ์
๋ ฅํ ๋๋ง๋ค ๊ฐ๋ฐ์๋๊ตฌ Console tab์ ์ฐํ๋ code
code 1, 2, 3 ๋ชจ๋ ๊ฒฐ๊ณผ ๋์ผ
code 1
function showText(e){
console.log(e.target.value)
}
return (
<div>
<input type="text" onChange="{showText}" />
</div>
);
discription
- target :
input
tag - value :
input
์ value์ด๋ฏ๋ก input ์์์ ์์ฑํ ๊ฐ์ด value
code 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
- showText ํจ์์ ๋งค๊ฐ๋ณ์ txt ์ค์
function showText(txt)
- console.log์ ๋ฐ๋ก txt๋ฅผ ์ถ๋ ฅํ๊ฒ ๋ณ๊ฒฝ
console.log(txt)
- return ์์ญ ์์์ txt๋ฅผ const ๋ณ์๋ก ์ ์
const txt = e.target.value;
- ๊ทธ ๊ฐ์ ํจ์์ธ showText๋ก ์ ๋ฌ
showText(txt);
๐ฅ ๋ฒํผ์ ๋๋ฅผ ๋๋ง๋ค ์ด๋ฆ์ ๋ณ๊ฒฝํ๋ code
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
- ID๊ฐ name์ธ element์ text (
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>
๐ฅ useParams๋ก ์ฃผ์์ฐฝ์ ์ ๋ ฅ๋๋ ๋ณ์ ์์ฑํ๋ code
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
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
๐ the source of this content
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ React Codes), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@maimade/CloneCoding1-CollaborationProcess์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค