state

state ( 상태 관리 )
state관리 하는 몇가지 방법이 있다. 안에서
props 컴포넌트에

변수

let count = 0; // 초기 상태

function increment() {
    count++; // 상태 업데이트
    console.log(count);
}

increment(); // 출력: 1
increment(); // 출력: 2

객체

let user = {
    name: 'John',
    age: 30,
    isLoggedIn: false
};

// 상태 업데이트
user.age = 31;
user.isLoggedIn = true;

함수

let count = 0; // 초기 상태

function increment() {
    count++; // 상태 업데이트
}

function decrement() {
    count--; // 상태 업데이트
}

increment(); // count: 1
decrement(); // count: 0

클로저

function createCounter() {
    let count = 0; // 비공개 상태

    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

let counter = createCounter();
counter.increment(); // 반환: 1
counter.increment(); // 반환: 2
counter.decrement(); // 반환: 1

typescript에서의 useState 이용 방법.
React라이브러리에서 상태관리를 위한 훅(hook).

주의점 : 값이 불변해야 한다.
간단한 예시

import React, { useState } from 'react';

const Counter: React.FC = () => {
  // 여기 코드에서 <number> 이라는 타입 정의를 해주었다.
  const [count, setCount] = useState<number>(0);

  // click함수 
  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;

위 코드에서 처럼 보통 count의 값을 바꾸는것이 아닌 setCount의 값을 바꿔준다.

타입 정의 같은경우는

interface 변수명 {
	name : string,
    age : number
}

interface를 사용하는 방법도 있다.

컴포넌트는 사용자 인터페이스를 구성하는 빌딩블록.
2가지 컴포넌트가 있는데

함수형 컴포넌트

• 함수형 컴포넌트는 함수로 구현 주로 간단한 UI를 표현할 때 사용.
• 생명주기 관리 가능
• 최근 주로 사용

클래스형 컴포넌트

• 클래스형 컴포넌트는 ES6 클래스로 구현되며, React.Component를 확장하여 작성됩니다.
• 최근 잘 안씀
• 사용 해야 될때도 있음.