[React] Component의 변수인 State

State

• React 컴포넌트에서 데이터를 담기 위한 상자(변수)
• 컴포넌트에서 사용하는 컴포넌트 전용 변수

useState

• 변수를 만들어주는 기능

const [변수명] = useState("담을 내용");

setState

• 변수 안에 담긴 데이터를 바꿔주는 기능

const [변수명, set변수명] = useState("담을 내용");
set변수명("바꿀 내용");

💡 JavaScript 변수를 사용하지 않는 이유

• JS 변수인 let/const를 사용하면, 값이 변경되었을 때 데이터만 변경되고(console에 출력하면 변경된 값이 나옴) 화면(document)에는 반영되지 않음

• 컴포넌트 변수인 state를 사용하면 setState() 안에서 화면을 새롭게 그리라는 명령이 실행되어 화면에도 반영됨

• JS에서 만든 변수를 HTML에 바로 사용 가능
  (document.getElementById 이런 거 안 써도 됨)