state 없이 변수로 변경하기

export default function Hello() {
let name = "기본값"

const changeName = () => {
  name = name === "기본값" ? "변경값" : "기본값"
  console.log(name);
  document.getElementById("name").innerText = name;
}

  return (
    <div>
      <h1>State</h1>
      <h2 id="name">{name}</h2>
      <button onClick={changeName}> button </button>
    </div>
  );
}

➡️ button 누를 때마다 값 변경 '기본값', '변경값' 변경

state 사용

1. import

import {useState} from "react";

2. state 선언

const [name, name을 변경할 함수] = useState(초기값);
const [name, setName] = useState('이름');

3. 값 변경하는 함수

import {useState} from "react";

export default function Hello() {

  const [name, setName] = useState('기본값');

  const changeName = () => {
    setName(name === "기본값" ? "변경값" : "기본값")
  }
  
  return (
    <div>
      <h1>State</h1>
      <h2 id="name">{name}</h2>
      <button onClick={changeName}> button </button>
    </div>
  );
  }

재사용해서 컴포넌트를 만들어도 각 state값은 독립적으로 특정
컴포넌트에서 막 관리할 수 있다는 특징이 있음

props(properties)

상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용 (단방향 데이터 흐름)
수정할 수 없다는 특징이 있음 (읽기전용)

1. 컴포넌트에 props 전달

<UserName name={name} />
UserName이라는 컴포넌트에 {name} 이라는 props를 전달하고 있다

2. props 사용

UserName 컴포넌트가 작성되어있는 UserName.js 파일 내용

export default function UserName(props){
    return <p>Hello, {props.name}</p>
}

export default function UserName({name}){
    return <p>Hello, {name}</p>
}

위 아래 코드는 같은 결과가 나옴