React state

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

state의 용도는 변수랑 똑같다. 그럼에도 불구하고, 굳이 변수 말고 state 를 쓰는 이유는

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

 

state 는 어떻게 사용하냐면

1. 맨 윗줄에 import {useState} from 'react' 하고 

2. let [ 데이터명 , 데이터바꿀때함수명 ] = useState('저장하고싶은 데이터');

  function App() {
  
  let [a, b] = useState(["a1", "a2", "a3", "a4"]);
  console.log(a);
  
  }
  
  //['a1', 'a2', 'a3', 'a4']

위와같이 여러개의 데이터를 변수에 담아서  저장 할 수있다. 

만약 a에 들어있는 값을 바꾸고 싶으면 

state 변경함수 인 b 를 이용하여 바꿀 수 있다.

  function App() {
  
  let [a, b] = useState(["a1", "a2", "a3", "a4"]);
  console.log(a);
  //['a1', 'a2', 'a3', 'a4']
  
  return (
  <div>
     <button
        onClick={() => {
          b(["a5", "a6", "a7"]);
          console.log(a);
          // ['a5', 'a6', 'a7']
        }}
      >
        test
      </button>
  <div>
  
  )
  
  }

 정리하자면

1. 클릭시 뭔가 실행하고 싶으면 onClick={함수} 이렇게 이벤트 핸들러를 달아서 사용
2. state를 변경하려면 state 변경함수를  사용
3. state변경함수는 ( ) 안에 입력한걸로 기존 state를 바꾼다.