state, useState

https://www.youtube.com/watch?v=p5ZP4xzhRxk&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=7

기존에 사용하던 상태관리와 state의 개념

export default function Hello() {
  let name = "Mike";

  function changeName() {
    name = name === "Mike" ? "Jane" : "Mike";
    //name이 Mike일때는 Jane으로, Jane일때는 Mike로 바꿔줌
    console.log(name);
  }

  return (
    <div>
      <h1>state</h1>
      <h2>{name}</h2>
      <button onClick={changeName}>Change</button>
    </div>
  );
}

위의 코드대로 작성하면 버튼을 아무리 클릭해도 화면에 업데이트 되지 않는다.
그래서 아래처럼 작성해주어야 한다.

export default function Hello() {
  let name = "Mike";

  function changeName() {
    name = name === "Mike" ? "Jane" : "Mike";
    //name이 Mike일때는 Jane으로, Jane일때는 Mike로 바꿔줌
    console.log(name);
    document.getElementById("name").innerText = name; //👈 추가
  }

  return (
    <div>
      <h1>state</h1>
      <h2 id="name">{name}</h2>   //👈 id 추가
      <button onClick={changeName}>Change</button>
    </div>
  );
}

let = name은 변수일 뿐 컴포넌트가 관리하고있는 상태값, state가 아니다.
그래서 값이 바뀌어도 React에서는 인지하지 못하고 UI를 업데이트하지 않는다.

그럼 어떻게해야 할까?🤔

상태값 관리를 위한 useState 사용

useState는 React Hook이다.
React Hook 종류는 여러가지가 있는데, useState는 그 중 하나다.

🔍 사용 방법

1) import

import { useState } from "react";

2) useState() 사용 코드 작성

const [name, setName] = useState();

useState는 배열([name, setName])을 반환한다.

배열 구조 분해를 사용한 코드로,
배열의 첫 번째 값 [name]은 state이며(변수명이라고 생각하면 된다)
두 번째 값 [setName]은 state를 변경해주는 함수다.

두 번째 값 [setName]함수의 내용이 바뀌면 React는 해당 컴포넌트를 다시 렌더링 해준다.

3) useState() 괄호 안에 초기 값 작성

const [name, setName] = useState("초기값");

1)~3)번까지 적용한 코드

import { useState } from "react";

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

  function changeName() {
    const newName = name === "Mike" ? "Jane" : "Mike";
    //name이 Mike일때는 Jane으로, Jane일때는 Mike로 바꿔줌

    setName(newName);
  }

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

리팩토링한 코드

import { useState } from "react";

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

  function changeName() {
    setName(name === "Mike" ? "Jane" : "Mike"); //👈 변경
  }

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

리팩토링한 코드

import { useState } from "react";

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

  return (
    <div>
      <h1>state</h1>
      <h2 id="name">{name}<;/h2>
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike"); //👈 변경
        }}
      >
        Change
      </button>
    </div>
  );
}

useState를 사용한 컴포넌트의 활용과 이해

위에서 작성한 Hello.js 컴포넌트를 App.js에서 세 번 작성하면?

import "./App.css";
import Hello from "./component/Hello";
import Welcome from "./component/Welcome";

function App() {
  return (
    <div className="App">
      <Hello />  //👈 Hello 컴포넌트 세 번
      <Hello />  //👈
      <Hello />  //👈
    </div>
  );
}

export default App;

화면에도 아래와 같이 나온다.

여기서 주목해야 할 점은
Change 버튼을 눌러도 Mike, Jane = state값 전체가 바뀌지 않는다는 점이다.

function App() {
  return (
    <div className="App">
      <Hello />  //👈 첫째
      <Hello />  //👈 둘째
      <Hello />  //👈 셋째
    </div>
  );
}

편의상 첫째~셋째<Hello/>라고 불러서 설명하자면

첫째<Hello/>인 맨 위 Change버튼을 누르면 첫째<Hello/>의 name만 바뀐다.

마찬가지로 둘째<Hello/>인 중간 Change버튼을 눌러도 둘째<Hello/>인 중간 name만 바뀐다.

이렇게 따로따로 상태관리가 가능하다는 점!