state

0.state란?

자바스크립트에서는 변수를 저장할때 let 변수명 = '변수'
이런식으로 사용했지만

리액트에서는 변수말고 state를 만들어 변수를 저장할 수 있다.

1.state 문법

function App(){
  let [a, b] = useState('냠냠');
  
  //a는 state 값 b는 state 값의 변경을 돕는다
  
  return (
    <h4>{ a }</h4> //냠냠 출력
  )
}
//이런식으로 {}안에 데이터를 넣는것을 데이터 바인딩이라고 한다

function App(){
  let [a, b] = useState(0);//a의 값은 0
 
  return (
    <button onClick={() => {
        b(a + 1); //state 변경함수 사용법 
      }}>{ a }</button>
  )
}
//버튼을 눌렀을때 버튼 값이 1씩 올라가는 state변경 함수

function App(){
  let [a, b] = useState(['안녕','잘가','hi','goodbye']);
 
  return (
    <h4>{ a[1] }</h4>//잘가 출력
  )
}//array식으로도 만들수 있음

2.state의 장점

state는 변동사항이 생기면 state를 쓰고 있는
html도 자동으로 재렌더링 해준다

3.state는 어떨때 쓰느냐

state는 상품명, 글제목, 가격 이런것 처럼 자주 변할 것 같은 데이터들을 저장하는게 좋은 사용법이다.