[React] useState에서 사용하는 State는 정확히 무엇을 말하는걸까?

Hook을 공부하며 useState를 사용중 State에 대해 좀 더 자세히 알고 싶어 졌다.
react에서 말하는 State는 무엇인지 알아보자 !

 

State ?

 

- 리액트 Component의 상태 ( 이때 말하는 상태는 리액트 Component의 데이터와 가까운 말이다.)

  즉, 리액트 Component의 변경가능한 데이터를 State라고 한다.

 

- state는 렌더링이나 데이터 흐름에 사용되는 값만 포함해야한다. 

  ( 그렇지 않으면 불필요한 재렌더링이 발생하여 성능저하가 발생한다. )

 

- state는 JavaScript 객체이다.

 

- state는 직접 수정하지 않는다 !  (setState 함수를 통해 사용해야한다.)

 

- state가 변경되어 재렌더링 하는 과정에서 Virtual DOM이 생성된다.

  이때 이전 Virtual Dom과 다른 부분을 찾아내어 메모리에서 먼저 구현하고 실제 바뀐

  DOM 부분만 업데이트 한다.

 

State를 만드려면?

 

- useState를 사용한다.

import { useState } from "react";

// const [state, state변경함수] = useState(기본 state값);

const [isLoggedIn, setIsLoggedIn] = useState(false);

 

 

State의 특징

 

- 어디에서든 사용가능하다

 

- 하지만 코드가 길어지고 프로젝트가 커질수록 이러한 State는 점점 관리가 어려워진다는 단점이 있다.

- 이러한 단점때문에 상태관리를 도와주는 툴을 사용하기도 한다.

 

ex)

• React Context
• Redux
• MobX

 

---

 

state를 말하며 Class component 의 생명주기를 빼먹을 수 없는데, 현재는 Class component를 사실상 거의 사용 하지 않는다고 한다. 가볍게만 정리 하고 가자!

 

 

리액트 클래스 컴포넌트의 생명주기

 

생명주기는 크게 1. Mounting  (출생)  2.Updating (인생)  3.Unmounting (사망) 으로 나눈다.

 

 

더 자세한 내용을 아래 링크를 참고하면 좋을 것 같다.

 

https://www.w3schools.com/react/react_lifecycle.asp

React Lifecycle

 

 

마지막으로 알아두아야 할 점!

 

Component는 계속 존재하는 것이 아닌 시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다.