Dust

컴포넌트 내부에서 변경할 수 있는 값

state

클래스형 컴포넌트에서 사용

클래스형 컴포넌트에서 state는 객체형식

props는 부모 컴포넌트에서 설정하여 자식 컴포넌트로 전달 또는 바깥의 컴포넌트에서 감싸고 있는 컴포넌트를 표현함

props 읽기 전용이라고 생각하면 쉽다, 변경하려면 부모 컴포넌트에서 !

useState

함수형 컴포넌트에서 사용

함수형 컴포넌트에서 useState는 객체가 아니어도 상관x

함수 호출 시 배열을 반환함

const Main = () => {

    const [message, setMessage] = useState('');
    // 첫번째 원소는 현재상태, 두번째 원소는 상태를 바꾸어주는 세터함수
    const [test, setTest] = useState('');
    // ex) 이름도 자유롭게 설정할 수 있다
    
    const [state, setState] = useState({
      key1: value,
      key2: value
    });
    
    setState({ ...state, key: value});
    // 값 추가
}

예시

const [on, setOn] = useState(false);
const lightSwitch = () => setOn(on => !on);

return (
  <>
    <button onClick={lightSwitch}> ON / OFF </button>
  <>
);

https://min-ji07.tistory.com/entry/React-class-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8?category=926976