[React] 이벤트 처리, useState, prop - 예제 코드

이벤트 처리(Handling Event)

export default function Welcome () {
    function showName () {
        console.log("yuns")
    }
    function showAge (age) {
        console.log(age)
    }
    function showText (txt) {
        console.log(txt)
    }
    return (
        <div>
            <h2 style={{color:"white", backgroundColor:"navy"}}>Welcome!</h2>
            <button onClick={showName}>Show name</button>
            
            <button onClick={
            	// 두번째 방법이 매개변수를 전달하기에 용이 
                ()=>{showAge(10)}
            }>Show age</button>
            
            <input type="text" onChange={(e) => {
                const txt = e.target.value;
                showText(txt);
            }} />
        </div>
    )
}​

 

 

useState()

• state : 컴포넌트가 갖고 있는 속성값

import { useState } from "react";

export default function Welcome () {
    const[name, setName] = useState("Mike");

    // let name = "Mike";
    // function changeName () {
    //     name = (name === "Mike" ? "Jane" : "Mike");
    //     document.getElementById("name").innerText = name;
    // }
    return (
        <div>
            <h1>state</h1>
            <h2 id="name">{name}</h2>
            <button onClick={() => {setName(name==="Mike"?"Jane":"Mike")}}>Change</button>
        </div>
    )
}

props

• props : properties, 속성값

 

props vs. state

• props : readonly → 값 변경할 수 없음 ✅ state 값을 받아서 가공해야 한다.
• 한 컴포넌트(부모)가 갖고 있는 state를 props(자식의)로 넘길 수도 있다.

---

🚀 참고

• React JS #6 이벤트 처리(Handling Events), 코딩앙마
• React JS #7 state, useState, 코딩앙마 
• React JS #8 props, 코딩앙마