중요 자료 저장 state

state 란 ?

• 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다.
• 프로퍼티(props)의 특징은 컴포넌트 내부에서 값을 바꿀 수 없다. 하지만 값을 바꿔야 하는 경우도 분명 존재하며, 이럴때 state라는 것을 사용한다.
• 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다.

사용법

import { useState } from 'react';
function App() {
    let [a , b] = useState("react기초 입니다.");
}

위와 같이 사용하면

• a 자리에는 react기초 입니다. 가 남는다.
• b 자리는 state 변경을 도와주는 자리이다.

state 변경

state변경함수(새로운state)

ex) let [count, countUp] = useState(0);
<h4>{title[0]} <span onClick={()=>{countUp(count + 1)}}>❤️</span> {count}</h4>

변수 와 useState 차이 ?

useState("react 기초 입니다.")괄호 안에 값이 변경될 경우state를 사용하면 html이 자동 재랜더링 된다.

useState 쉽게 이해하기

자주 변경될거같은 html 값은 state에 저장해놓기