State: 컴포넌트 기억 공간

컴포넌트는 상호작용 결과로 화면에 표시되는 내용을 변경해야 하는 경우가 많습니다. 예를 들어, 폼에 입력하면 입력 필드가 업데이트되어야 하고, 이미지 캐로셀에서 "다음"을 클릭하면 표시되는 이미지가 변경되어야 하며, "구매"를 클릭하면 제품이 장바구니에 추가되어야 합니다. 컴포넌트는 이런 정보를 "기억"해야 합니다. 현재 입력 값, 현재 이미지, 장바구니와 같은 것들을 말이죠. 리액트에서는 이러한 컴포넌트별 메모리를 상태(state)라고 합니다.

다음 내용을 배우게 됩니다.

• useState Hook을 사용하여 상태 변수를 추가하는 방법
• useState Hook이 반환하는 값의 쌍
• 여러 개의 상태 변수를 추가하는 방법
• 상태가 왜 로컬(local)이라고 불리는지

일반 변수만으로는 부족할 때

다음과 같이 조각 이미지를 렌더링하는 컴포넌트가 있습니다. "다음" 버튼을 클릭하면 인덱스가 1, 2 등으로 변경되어 다음 조각이 표시되어야 합니다. 그러나 이 방식은 작동하지 않습니다(시도해 볼 수 있습니다!):

handleClick 이벤트 핸들러는 로컬 변수인 index를 업데이트합니다. 그러나 변경 사항이 보이지 않게 하는 두 가지 이유가 있습니다.

1. 로컬 변수는 렌더링 간에 지속되지 않습니다. 리액트는 이 컴포넌트를 두 번째로 렌더링할 때 완전히 처음부터 렌더링하므로 로컬 변수의 변경 사항을 고려하지 않습니다.
2. 로컬 변수의 변경 사항은 렌더링을 트리거하지 않습니다. 리액트는 새로운 데이터로 컴포넌트를 다시 렌더링해야 함을 인지하지 못합니다.

새로운 데이터로 컴포넌트를 업데이트하려면 두 가지 작업이 필요합니다.

1. 데이터를 유지합니다(렌더링 간에).
2. 새 데이터로 컴포넌트를 다시 렌더링합니다.

이러한 두 가지를 제공하는 것이 useState Hook입니다.

1. 상태 변수를 유지하는 데 사용됩니다.
2. 상태 설정 함수를 제공하여 상태 변수를 업데이트하고 리액트에 컴포넌트를 다시 렌더링하도록 합니다.

상태 변수 추가

먼저 파일 상단에서 리액트에서 useState를 가져오세요.

import { useState } from 'react';

그런 다음 이 줄:

let index = 0;

다음과 같이 대체하세요.

const [index, setIndex] = useState(0);

index는 상태 변수이고 setIndex는 설정 함수입니다.

여기서 사용된 [와 ] 구문은 배열 비구조화라고 하며, 배열에서 값을 읽는 데 사용됩니다. useState에서 반환되는 배열은 항상 두 개의 항목이 있습니다.

다음은 handleClick에서 이들이 함께 작동하는 방식입니다.

function handleClick() {
  setIndex(index + 1);
}

이제 "다음" 버튼을 클릭하면 현재 조각이 전환됩니다.

첫 번째 Hook 만나보기

리액트에서 useState와 같이 "use"로 시작하는 함수를 포함하여 다른 기능을 사용할 때는 Hook이라고 부릅니다.

Hook은 리액트가 렌더링하는 동안에만 사용할 수 있는 특별한 함수입니다(다음 페이지에서 자세히 알아보겠습니다). 이를 통해 다양한 리액트 기능에 "연결"할 수 있습니다.

상태는 이러한 기능 중 하나일 뿐이지만, 나중에 다른 Hook들을 배우게 될 것입니다.

useState의 구조

useState를 호출하면 이 컴포넌트가 어떤 정보를 기억하길 원하는지 리액트에 알리는 것입니다.

const [index, setIndex] = useState(0);

이 경우 리액트에 index를 기억하길 원한다고 알립니다.

const [index, setIndex] = useState(0);

컴포넌트에 여러 개의 상태 변수 제공

한 컴포넌트에 여러 개의 상태 변수와 여러 가지 타입의 상태 변수를 가질 수 있습니다. 다음 컴포넌트는 숫자 index와 "자세히 보기" 버튼을 클릭할 때 토글되는 불리언 showMore의 두 가지 상태 변수를 가지고 있습니다.

index와 showMore와 같이 상태가 관련 없을 경우에는 여러 개의 상태 변수를 가지는 것이 좋은 아이디어입니다. 그러나 두 상태 변수를 함께 자주 변경한다는 것을 알게 된다면, 두 변수를 하나로 결합하는 것이 더 편리할 수 있습니다. 예를 들어, 여러 필드가 있는 폼인 경우, 필드마다 상태 변수를 갖는 것보다 객체를 하나의 상태 변수로 가지는 것이 더 편리합니다. 더 많은 팁은 상태 구조 선택하기에서 읽어볼 수 있습니다.

상태는 격리되고 비공개입니다.

상태는 화면의 컴포넌트 인스턴스에 대해 로컬입니다. 다른 말로 하면, 동일한 컴포넌트를 두 번 렌더링하면 각각이 완전히 격리된 상태를 가집니다! 그 중 하나를 변경해도 다른 하나에는 영향을 미치지 않습니다.

이 예제에서는 이전에 보여준 갤러리 컴포넌트가 로직에 변경 없이 두 번 렌더링됩니다. 각 갤러리 안의 버튼을 클릭해 보세요. 그들의 상태가 독립적임을 알 수 있습니다.

이것이 상태를 모듈의 맨 위에 선언하는 일반 변수와 다른 점입니다. 상태는 특정 함수 호출이나 코드의 위치에 연결되지 않지만, 화면의 특정 위치에 "로컬"되어 있습니다. 여러분은 두 개의 <Gallery /> 컴포넌트를 렌더링했으므로 그들의 상태는 별도로 저장됩니다.

또한 Page 컴포넌트가 갤러리 상태를 "알지" 않거나 상태가 있는지 여부를 모릅니다. props와 달리 상태는 선언한 컴포넌트에 완전히 비공개입니다. 부모 컴포넌트는 상태를 변경할 수 없습니다. 이렇게 하면 다른 컴포넌트에 영향을 주지 않고 어떤 컴포넌트에든 상태를 추가하거나 제거할 수 있습니다.

만약 두 개의 갤러리가 상태를 동기화하여 유지하려면 리액트에서는 자식 컴포넌트에서 상태를 제거하고 가장 가까운 공유 부모에 상태를 추가하는 것이 옳은 방법입니다. 다음 몇 페이지에서는 단일 컴포넌트의 상태를 조직화하는 방법에 초점을 맞출 것이지만, 컴포넌트 간에 상태 공유하기 주제로 돌아올 것입니다.

요약

• 컴포넌트가 렌더링 간에 일부 정보를 "기억"해야 할 때 상태 변수를 사용합니다.
• 상태 변수는 useState Hook을 호출하여 선언합니다.
• Hook은 "use"로 시작하는 특별한 함수입니다. 이를 통해 상태와 같은 리액트 기능에 "연결"할 수 있습니다.
• Hook은 import와 비슷한 방식으로 호출되어야 합니다. useState를 포함한 Hook 호출은 컴포넌트의 최상위 수준이나 다른 Hook 내에서만 유효합니다.
• useState Hook은 현재 상태와 상태를 업데이트할 수 있는 함수의 쌍을 반환합니다.
• 여러 개의 상태 변수를 가질 수 있습니다. 리액트 내부적으로 순서를 맞춥니다.
• 상태는 컴포넌트에 대해 비공개입니다. 동일한 컴포넌트를 여러 곳에서 렌더링하면 각각의 사본에는 독립적인 상태가 있습니다.