[React] State란

State

State는 리액트에서 앱의 유동적인 데이터를 다루기 위해 있는 객체입니다.

일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState() 라는 리액트 함수를 사용하여 

State라는 저장공간에 담아 사용합니다.

 

State를 사용하는 이유

• State는 변경되면 자동으로 재렌더링 된다. (변수는 변경되어도 자동 재렌더링이 안됨)

---

State 동작 원리

import {useState} from 'react';

let [state, setState] = useState('State'); // ES6 destructuring

 

React 라이브러리에 있는 useState()함수를 통해 state를 사용할 수 있습니다. useState()를 실행시키면 초기값으로 설정해 놓은 state를 기억하고 있습니다. 이벤트에 의해 setState를 통해 state의 값이 변경되면 변경된 state값에 맞춰 재렌더링 하게 됩니다.

 

state가 변경되어 재렌더링 하는 과정에서 Virtual DOM이 생성되는데 리액트에서 이전의 Virtual DOM과 다른 부분을 찾아내어 메모리에서 먼저 구현한 후 실제 DOM 부분만 업데이트 합니다.

 

참고

• https://thinkforthink.tistory.com/339
• https://ko.reactjs.org/docs/faq-internals.html