State란?

State

state는 컴포넌트 내부에서 생성하여 관리하는 데이터 객체로 이 값의 변화로 재렌더링이 실행됩니다.

props와 달리 state는 컴포넌트 내부에서 생성된 일반 자바스크립트 객체로서 값을 수정하는게 가능하며 함수형 자바스크립트에선 state를 사용하기 위해
import {useState} from "react";
선언을 해주어야합니다.

state 생성

const [count,setCount]=useState(0);

변수선언방식 [state이름,setter함수이름]=useState(초기값)
이러한 방식으로 선언되는데

• useState([]) 을 사용해주면 빈 배열의 state를 생성할 수 있습니다.

state 선언시에 같이 설정한 setter함수를 통해 state의 값을 변경할 수 있습니다

const counter = () => {
  setCount(count+1);
}

저는 현재 state인 count의 값을 1증가 시키는 함수를 만들기 위해 함수 하나를 선언해서 그안에 setCount(count+1)을 넣었습니다
이러면 counter()함수가 호출될때마다 1씩 값이 증가하겠죠?

• count가 배열 일경우 setCount([...count,추가할 값]);을 해주면 되는데 배열은 주소값이기 때문에 setCount(배열)로 해주어도 count의 값이 변한게 아닌 count가 특정 배열의 주소를 가르키는 것 이기때문에 직접 배열에 기존값을 split해주고 추가값을 넣어주는 형식으로 변경해주는 것 입니다!

실전

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <App id="app">값 증가</App>
  </>
);

index.js

import { useState } from 'react';
import './App.css';


function App({id='not',children='없음'}) {
  
  const [count,setCount]=useState(0);

  const counter = () => {
    setCount(count+1);
    console.log(count);
  }

  return (
   <>
  <button onClick={counter} id={id}>{children}</button>
  <p>{count}</p>
   </>
  );
}

export default App; //App이란 이름으로 다른 js파일에서 사용된다.

App.js

결과

코드와 결과를 보시면 제가 직접 children을 건드리는 것 일절 없이 state의 값이 변하는 함수만이 있는데 값이 바로 변하는 것을 볼 수 있는데
이는 state의 값이 변하면 이 컴포넌트를 재 렌더링 하기 때문입니다.

• 결과 화면을 보시면 값이 제가 console.log(count)를 통해 count값을 찍어 보았는데 1이되도 0으로 console에 찍힙니다.
  이 현상의 이유는 state가 변경될때 즉시 재렌더링이 되지않고 함수의 기능을 마치고 렌더링이 끝난뒤에 state가 일괄적으로 변경 되는 것입니다
  이것은 리액트가 부모 컴포넌트와 자식컴포넌트 둘다 state의 변경이 일어난다고 가정했을때 먼저 state가 변경됨으로서 즉시 재렌더링이 되버리면 오류가 일어날 수 있고 함수의 기능들을 정상적으로 구현하기 위한 것이라고 하네요

state이 값은 재렌더링이 되고 일괄적으로 변경된다 이 점을 잘 기억해두고 개발하시는게 좋습니다!