상태 변수를 살펴보기 전에 React 구성 요소를 작동시키는 요소를 분석해 보겠습니다!

리액트 컴포넌트란 무엇인가요?

React에서 구성 요소는 사용자 인터페이스(UI)의 일부를 나타내는 재사용 가능한 코드 조각입니다. HTML 버튼만큼 간단할 수도 있고 전체 페이지만큼 복잡할 수도 있습니다.

React의 상태 변수란 무엇입니까??

React에서 상태 변수는 구성 요소에 특정한 데이터를 저장하는 특수 유형의 변수입니다.

왜 상태 변수가 필요한가요??

React에서 컴포넌트는 React 애플리케이션의 구성 요소입니다. 기능적이거나 클래스 기반일 수 있습니다. 기능적 구성 요소라고 하면 일반적으로 반환 노드 또는 JSX 요소(HTML처럼 보이지만 실제로는 JavaScript 코드인 특수 구문)입니다. 브라우저에 콘텐츠를 표시하기 위해 React는 단순히 기능적 구성 요소를 호출하여 요소를 렌더링합니다. 구성요소/함수가 호출/렌더링될 때마다 해당 변수가 다시 선언되고 다시 초기화됩니다. 이렇게 하면 구성 요소가 해당 데이터에 대한 변경 사항을 유지하지 못하게 됩니다. 일반 JavaScript 변수는 다시 렌더링(함수 호출) 시 지속되지 않기 때문에 충분하지 않습니다.

한 가지 잠재적인 해결책은 전역 변수를 사용하고 이를 매개변수로 전달하여 함수에 반응하는 것입니다. 그러나 이로 인해 긴밀한 결합이 발생하여 코드를 이해하고 테스트하고 유지 관리하기가 더 어려워질 수 있습니다.

이 문제를 해결하기 위해 React 팀은 해결책을 찾았습니다. 상태변수라고 합니다.

구성 요소가 렌더링 간의 일부 정보를 "기억"해야 할 때 상태 변수를 사용합니다. 상태 변수는 useState 후크를 호출하여 선언됩니다.

이 변수를 통해 React 구성 요소는 시간이 지남에 따라 변경되는 데이터를 관리하고 저장할 수 있습니다. 일반 변수와 달리 상태 변수는 기본적으로 불변이며 상태 업데이트 기능에 의해서만 업데이트될 수 있습니다. 이 함수는 값이 변경될 때마다 구성 요소의 다시 렌더링을 트리거합니다. 이러한 동적 동작을 통해 React 구성 요소는 활성 데이터 업데이트를 반환하고 이상적인 사용자 경험을 제공할 수 있습니다. React는 상태 변수의 변경 사항을 추적합니다. 변경 사항이 감지되면 React는 조정이라는 프로세스를 사용하여 DOM 트리를 자동으로 다시 렌더링합니다.

더 깊이 알아볼 준비가 되셨나요?

추가 리소스:
구성요소의 메모리 상태

도움이 되었기를 바랍니다! 궁금한 점이 있거나 추가 설명이 필요한 경우 알려주시기 바랍니다. 피드백과 제안을 공유하세요.