[React] Component의 변수인 State

이주희·2022년 3월 20일
0

React ♥️ Next.js

목록 보기
10/48

State

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

useState

  • 변수를 만들어주는 기능
const [변수명] = useState("담을 내용");

setState

  • 변수 안에 담긴 데이터를 바꿔주는 기능
const [변수명, set변수명] = useState("담을 내용");
set변수명("바꿀 내용");

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

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

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

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

profile
🍓e-juhee.tistory.com 👈🏻 이사중

0개의 댓글