[React] 02. State 사용

 

 

 

 

 

🙆‍♂️State

---

State란 변수와 같습니다. 자료를 잠깐 저장하는 기능입니다.'

 

import { useState } from 'react';

state를 사용하기 위해서는 위와같이 import가 되어있어야 합니다.

useState를 쳐도 자동완성으로 import 시켜줄 때도 있습니다.

 

function App() {
  let [a,b] = useState("맛집1");

  return (
    <div className="App">
      <header className='header'>
        <h3>블로그</h3>
      </header>
      <div className='article'>
        <h4>
          게시글1 {a}
        </h4>
        <p>
          2022/07/07
        </p>
      </div>
    </div>
  );
}

이렇게 작성을해보면

이런식으로 페이지가 만들어지는데 useState의 정확한 사용법을 보면

let [a,b] = useState("맛집1");

이런식으로 useState함수를 사용해서 값을 저장할 수 있습니다. 이때

a에는 state로 보관한 자료인 맛집1이 저장되고

b에는 state의 변경을 도와주는 함수입니다.

만약 b 함수를 아직 사용하지 않을 것이면 a만 적어놓아도 됩니다.

이 함수에 대한 부분은 버튼 게시물에 정리해놨습니다.

 

 

🙋‍♂️State를 사용하는 이유

---

변수가 있는데 왜 state라는 개념이 있는 것일까요?

 

변수에 저장했던 값이 변경된 경우에 HTML에서도 그 값을 변경해줘야 하는데 자동으로 변경되지 않습니다.

하지만 state로 사용하면 값이 변경된다면 자동으로 재렌더링이 되어서 바뀐 값이 화면에 표시됩니다.