React State DeepDive

Component는 특정 기능을 수행하는 단위로 많이 만들어지기 때문에 상호작용이 많고 그 결과를 화면에 실시간으로 변경해야 하는 특징을 가지고 있습니다.

간단한 예시로 많은 예제에서 Counter를 구현합니다. 숫자를 기억하여 표시하고 Increase/Decrease를 통해 증가 또는 감소하여 화면에 실시간으로 변경합니다.

React에서는 이처럼 Component의 메모리를 State라고 합니다.

여기서 말하는 State는 일반 변수와는 다릅니다.

차이점으로 실시간 반영 여부가 있습니다.

일반 변수가 실시간 반영이 되지 않는 이유는 2가지 입니다.

1. 렌더링 시 이전 값을 유지하지 않음
2. 변수가 변경되어도 리렌더링이 일어나지않음

즉, 위의 두가지 이유를 반대로 충족한다면 실시간 반영이 이루어질 수 있고 State는 모두 반대로 충족하고 있습니다.

import { useState } from 'react';

...

// index : State 값을 의미하며 초기 값은 0입니다.
// setIndex : State 값을 변경하기 위한 함수이며 매개변수에는 값 또는 Dispatch가 들어갈 수 있습니다.
const [index, setIndex] = useState(0);

이 글은 State 사용법을 설명하는 글이 아니기에 간단하게 예시만 작성하고 넘어가겠습니다.

• State는 독립적입니다.
• State는 비공개 변수입니다.