State: 컴포넌트의 기억 저장소

일반 변수로 충분하지 않은 경우

다음은 조각상 이미지를 렌더링하는 컴포넌트입니다. “Next” 버튼을 클릭하면 index를 1, 2로 변경하여 다음 조각상을 표시해야 합니다. 그러나 이것은 작동하지 않습니다 (시도해 보세요!)

handleClick 이벤트 핸들러는 지역 변수 index를 업데이트하고 있습니다. 하지만 이러한 변화를 보이지 않게 하는 두 가지 이유가 있습니다.

1. 지역 변수는 렌더링 간에 유지되지 않습니다. React는 이 컴포넌트를 두 번째로 렌더링할 때 지역 변수에 대한 변경 사항은 고려하지 않고 처음부터 렌더링 합니다.
2. 지역 변수를 변경해도 렌더링을 일으키지 않습니다. React는 새로운 데이터로 컴포넌트를 다시 렌더링해야 한다는 것을 인식하지 못합니다.

컴포넌트를 새로운 데이터로 업데이트하기 위해선 다음 두 가지가 필요합니다.

1. 렌더링 사이에 데이터를 유지합니다.
2. React가 새로운 데이터로 컴포넌트를 렌더링하도록 유발합니다.

훅은 이 두 가지를 제공합니다.

1. 렌더링 간에 데이터를 유지하기 위한 state 변수.
2. 변수를 업데이트하고 React가 컴포넌트를 다시 렌더링하도록 유발하는 state setter 함수

state 변수 추가하기

state 변수를 추가하려면 파일 상단의 React에서 useState를 가져옵니다.

그런 다음 이 줄을

다음과 같이 바꿉니다.

index는 state 변수이고 setIndex 는 setter 함수입니다.

여기서 [와 ] 문법을 라고 하며, 배열로부터 값을 읽을 수 있게 해줍니다. useState가 반환하는 배열에는 항상 두 개의 항목이 있습니다.

이것이 handleClick에서 함께 작동하는 방식입니다

이제 “Next” 버튼을 클릭하면 현재 조각상을 전환합니다.

첫 번째 훅 만나기

React에서 useState와 같이 “use”로 시작하는 다른 모든 함수를 훅이라고 합니다.

훅은 React가 오직 중일 때만 사용할 수 있는 특별한 함수입니다. (이에 대해서는 다음 페이지에서 자세히 알아보겠습니다) 이를 통해 다양한 React 기능을 “연결”할 수 있습니다.

State는 이러한 기능 중 하나일 뿐이며, 나중에 다른 훅들을 만나게 됩니다.

useState 해부하기

를 호출하는 것은, React에 이 컴포넌트가 무언가를 기억하기를 원한다고 말하는 것입니다.

이 경우 React가 index를 기억하기를 원합니다.

useState의 유일한 인수는 state 변수의 초깃값입니다. 이 예시에서 index의 초깃값은 useState(0)에 의해 0으로 설정됩니다.

컴포넌트가 렌더링될 때마다, useState는 다음 두 개의 값을 포함하는 배열을 제공합니다.

1. 저장한 값을 가진 state 변수 (index).
2. state 변수를 업데이트하고 React에 컴포넌트를 다시 렌더링하도록 유발하는 state setter 함수 (setIndex).

실제 작동 방식은 다음과 같습니다.

1. 컴포넌트가 처음 렌더링 됩니다. index의 초깃값으로 useState를 사용해 0을 전달했으므로 [0, setIndex]를 반환합니다. React는 0을 최신 state 값으로 기억합니다.
2. state를 업데이트합니다. 사용자가 버튼을 클릭하면 setIndex(index + 1)를 호출합니다. index는 0이므로 setIndex(1)입니다. 이는 React에 index는 1임을 기억하게 하고 또 다른 렌더링을 유발합니다.
3. 컴포넌트가 두 번째로 렌더링 됩니다. React는 여전히 useState(0)를 보지만, index를 1로 설정한 것을 기억하고 있기 때문에, 이번에는 [1, setIndex]를 반환합니다.
4. 이런 식으로 계속됩니다!

컴포넌트에 여러 state 변수 지정하기

하나의 컴포넌트에 원하는 만큼 많은 타입의 state 변수를 가질 수 있습니다. 이 컴포넌트는 숫자 타입 index와 “Show details”를 클릭했을 때 토글 되는 불리언 타입인 showMore라는 두 개의 state 변수를 가지고 있습니다.

이 예시에서 index와 showMore처럼 서로 연관이 없는 경우 여러 개의 state 변수를 가지는 것이 좋습니다. 하지만 두 state 변수를 자주 함께 변경하는 경우에는 두 변수를 하나로 합치는 것이 더 좋을 수 있습니다. 예를 들어, 필드가 많은 폼의 경우 필드별로 state 변수를 사용하는 것보다 하나의 객체 state 변수를 사용하는 것이 더 편리합니다. 더 많은 팁은 에서 확인할 수 있습니다.

State는 격리되고 비공개로 유지됩니다

State는 화면에서 컴포넌트 인스턴스에 지역적입니다. 다시 말해, 동일한 컴포넌트를 두 번 렌더링한다면 각 복사본은 완전히 격리된 state를 가집니다! 그중 하나를 변경해도 다른 하나에는 영향을 미치지 않습니다.

이 예시에서 이전에 나왔던 Gallery 컴포넌트가 로직 변경 없이 두 번 렌더링되었습니다. 각각의 갤러리 내부 버튼을 클릭해 보세요. 그들의 state가 서로 독립적임을 주목하세요.

이것이 state를 일반적인 모듈 상단에 선언할 수 있는 보통의 변수와 구별하는 요소입니다. State는 특정 함수 호출이나 코드 내의 특정 위치와 관련이 없습니다. 대신, 화면의 특정 위치에 “지역적”입니다. <Gallery /> 컴포넌트를 두 번 렌더링했으므로 그들의 state는 별도로 저장됩니다.

또한 Page 컴포넌트가 Gallery의 state에 대해 아무것도 “알지” 않는다는 점과 심지어 그것이 있는지도 모른다는 것에 주목하세요. Props와 달리, state는 선언한 컴포넌트에 완전히 비공개입니다. 부모 컴포넌트는 이를 변경할 수 없습니다. 이로써 다른 컴포넌트에 영향을 미치지 않고 어떤 컴포넌트에든 state를 추가하거나 제거할 수 있게 됩니다.

만약 두 개의 갤러리가 state를 동기화하길 원한다면, React에서 올바른 방법은 자식 컴포넌트에서 state를 제거하고 가장 가까운 공통 부모 컴포넌트에 추가하는 것입니다. 다음 몇 페이지는 단일 컴포넌트의 state 구성에 중점을 두겠지만, 이 주제는 에서 다시 다룰 것입니다.