useState... 이거는 알고가야죠?

React 공식 문서에는 이렇게

컴포넌트에 state 변수를 추가할 수 있는 React Hook이라고 설명한다.

 

 

 

그럼 여기서 state는 무엇인가?

 

파파고에서 상태라고 해석되는데, 이와 같은 의미이다. 즉, 컴포넌트의 상태를 의미하는 것이다.

 

 

---

 

 

그럼? 다시 useState를 정의하자면,

컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공해 준다

 

state 생성과 동시에 가져야 할 초기값을 useState 함수에 인자로 넣으면 state와 setState를 두 가지 요소를 배열 형태로 리턴해준다.

 

ex)

const [state, setState] = useState(초기값)

 

 

---

 

 

쪼...... 끔 추상적이죠?

 

이해를 돕기 위해 한 마디로 정리하자면

-> useState는 React에서 컴포넌트 내부의 변경 가능한 데이터를 저장하고 업데이트하는 도구이다.

 

그럼 이 내부 변경 가능한 데이터, 즉 상태를 어디에 저장할까?

 

 

 

useState는 상태를 메모리에 저장한다.

RAM!

 

 

 

 

 

 

그래서 앱 실행 중에만 임시로 데이터를 저장한다.

- 그래서 페이지 새로고침 하면 초기화됨!

 

 

 

 

---

 

그래서!

진짜 한 줄로 정리하자면, 

- 변수를 저장하되 변경될 때마다 화면을 자동으로 업데이트하는 특별한 변수 저장소! 인 셈이다.