[React] 상태가 있다? 없다?

잠깐! 상태에 대해 아직 잘 모른다면 [React] useState === 상태?를 먼저 읽어보세요!

컴포넌트를 상태 저장과 비저장으로 분류하는 것에 대해 들어보셨나요? 상태를 저장한다? 상태를 저장하지 않는다? 이것이 무슨 의미이며 어떻게 구분할 수 있을까요?

상태 저장 컴포넌트는 개인 공간 내에 상태를 유지함을 의미합니다. 상태는 반드시 컴포넌트의 생명 주기 동안 유지될 필요는 없지만 최소한 휘발성은 아님을 의미합니다.

상태 비저장 컴포넌트는 이 반대를 의미합니다. 함수 내에서 사용되는 모든 상태는 휘발성으로 개인 공간 내에 유지되지 않습니다. 즉, 함수가 수행되는 동안만 유지됩니다.

function A() {
    const [ state, setState ] = useState();
}

function B() {
    const state = useMemo();
}

function C() {
    const state = value;
}

세 가지 함수형 컴포넌트가 있습니다. 이 중 상태 저장 컴포넌트에 해당하는 것은 무엇일까요? A? B? C? 정답은 A와 B입니다. 왜 그런지 각각의 컴포넌트를 살펴보도록 하겠습니다.

A 컴포넌트를 우선 살펴보도록 하겠습니다. 이것이 상태 저장이라는 것에 대해서는 이견이 없을 것으로 보입니다. useState는 React에서 상태를 유지하는 대표적인 방법입니다. 이는 컴포넌트 생명 주기 동안 유지되기 때문에 상태 저장에 해당합니다.

B 컴포넌트도 마찬가지로 useMemo를 통해 상태를 유지합니다. 따라서 상태 저장에 해당합니다.

C 컴포넌트는 함수 내에서 지역 변수만이 사용되므로 모든 상태는 함수 종료와 함께 폐기됩니다. 따라서 상태 비저장에 해당합니다.

읽어주셔서 감사합니다!

묻고 답하기

개인적인 판단에 의해 적절하다고 여겨지는 경우, 모두가 볼 수 있도록 이곳에 문답이 추가됩니다. 그렇지 않더라도 질문에 대한 답변은 별도로 이루어집니다.