📝 React Codes

[meɪ]·2021년 8월 30일

React

1-3. Today I Learned. React.js

목록 보기

2/9

📌 개발 공부 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);