☠️ 문제

👩🏻‍💻 시도해본 것들

👩🏻‍🎓 해결

✅ 알게된 점

---

📚 Today Study

state, useState

여기서 name은 state가 아니다. 단순히 변수일 뿐
이 컴포넌트를 관리하고 있는 상태값이 아니다.
그래서 바뀌어도 리액트는 그걸 인지하지 못해서 UI를 업데이트 해주지 않는다.

그럼 어떻게 해야 state로 만들 수 있을까?
첫번째 react hook인 useState를 사용하기
hook은 리액트 16.8버전부터 사용가능
초기 리액트는 스테이트와

function changeName() {
	let name = "Mike"
    name = name === "Mike" ? "Jane" : "Mike"
	console.log(name)
	document.getElementById("name").innerText = name;
} 

return (
  <div>
    <h1 id='name'>{name}</h1>
    <button onClick={changeName}>Change</button>
  </div>

const [state(변수명), 앞의 state(변수)를 변경해주는 함수] = useState('초기값')

function changeName() {
  const [name, setName] = useState('')
  const newName = name === "Mike" ? "Jane" : "Mike"

  setName(newName)
} 

return (
<div>           
  <h1 id="name">{name}</h1>
  <button
  	onClick={() => {
      setName(name === "Mike" ? "Jane" : "Mike")
  	}}
  >
  	Change
  </button>
</div>
)

useState는 배열을 반환한다.
setName이 호출돼서 name이 바뀌면 리액트는 다시 이 컴포넌트를 렌더링해준다.

---

📝 Today Review

---

❌ Solving Error