#8 useState (상태관리)

useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook입니다.

const [state, setState] = useState(initialState)

 

 

 

참고 : https://ko.react.dev/reference/react/useState

useState – React

 

import { useState } from "react";
import "./App.css";
import Sub from "./Sub";


function App() {
  console.log("App실행");
  // useState : 데이터를 상태값으로 설정
  // React안에 hooks 라이브러리 상태값이 됨 (UI와 동기화됨)  
  const[number, setNumber] = useState(1);
  const add = () => {
    // setNumber(number+1); // 리엑트한테 number값 변경을 요청.
    setNumber(prev => prev + 1); // 함수형 업데이트 적용
    console.log("add", number);
  };

  // 초기데이터 
  const userData=[
    {id:1, name:"홍길동"},
    {id:2, name:"임꺽정"},
    {id:3, name:"장보고"},
    {id:4, name:"이순신"},
  ];
  console.log(userData);  


  // 회원목록
  const[users, setUsers] = useState(userData);
  const updateUsers = () => {
    const getData={id:5, name:"김유신"}; // api호출결과값.

    // const newList=userData.concat(getData); // 원본데이터 불변성
    // setUsers(newList);
    // console.log(newList);        
    
    // concat과 동일한 결과, 더욱 간단해짐.
    setUsers([...userData, getData])
    console.log(userData);  
  };

  // 랜더링 시점 = 상태값 변경이 되는 경우 
  // 이전 데이터와 현재 데이터가 같은 경우 랜더링 하지 않음
  return (
    <div>
      <h1>useState</h1>
      <h1>숫자 : {number}</h1>
      <button key='addButton' onClick={add}>더하기</button>
      <Sub/>
      <div>
        <button onClick={updateUsers}>유저추가</button>
        <div>
          {users.map(user => (
            <h1 key={'h1-'+user.id}>
              {user.id}.{user.name}
            </h1>
          ))}
        </div>
      </div>

    </div>
  );
} 
export default App;