[React] 3. useState (일반 변수와 useState의 차이)

 

 

 

 목차

1. state와 useState 란?
2. 일반 변수와 useState의 차이

 

 

 

1. state와 useState 란?

1) state

• Component의 상태
• Component가 갖고 있는 상태 값(or 속성 값)
• 속성 값이 변하면 React는 UI를 즉시 변경
  • 일반 변수를 사용 시, 데이터가 return 되지 않아서 UI에서 변경 사항 확인 불가(console창에서만 확인 가능하다)
  • useState를 사용 시, UI 화면과 동기화 되어 수정사항 즉시 확인 가능
• 동적 데이터 처리를 위해 사용

 

2) useSate

• Component의 상태를 간편하게 생성하고 업데이트를 해주는 도구
• id, class 호출 없이 바인딩 후 상태 값을 변경하여 UI 화면을 변경
• 레퍼런스*의 상태가 변경돼야 동작

** 레퍼런스 : 상태값(state) or 상태를 업데이트하는 함수(useState)

 

 

2. 일반 변수와 useState의 차이

1. 일반 변수

• 일반 변수를 사용하게되면, 데이터가 return 되지 않아서 UI에서 확인 불가(console창에서만 확인 가능하다)

UI 화면은 변경이 되지 않음 (console창으로만 변경 확인가능)

 

 

 

2. useState

• useState를 사용하면 UI 화면과 동기화 되어 수정사항 확인 가능
• id, class 호출 없이 바인딩 후 상태 값을 변경하여 UI 화면을 변경

UI 화면에서 변경 사항 확인 가능

 

 

 

 

 

 

 

 

 

꿀tip

Reactjs code snippets를 설치하면 새로운 js 파일 생성 후, "rsc + 엔터" 하면 자동으로 기초 코드가 구성됨