컴포넌트 State란?

1. State란?

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

일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState() 라는 리액트 함수를 사용하여 State라는 저장공간에 담아 사용합니다.

1-1) State를 사용하는 이유

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

1-2) 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 부분만 업데이트 합니다.

2. State와 Props 비교

2-1) State

• 유스케이스 : 뷰에 랜더링되어야 하는 컴포넌트의 데이터를 저장하는데 사용
• 가변성 : 상태는 데이터를 보유하고 시간이 지남에 따라 변경될 수 있다.
• 업데이트 : 이벤트 핸들러는 일반적으로 state를 업데이트 한다.

2-2)Props

• 유스케이스 : 데이터, 이벤트 핸들러를 자식 컴포넌트에 전달하는데 사용
• 가변성 : props는 바뀔 수 없다. 한 번 설정되면 변경할 수 없다.
• 업데이트 : 상위 컴포넌트는 하위 컴포넌트에 대한 props를 설정한다.