[리액트문서보기][상호작용성 더하기] State: 컴포넌트의 기억 저장소

학습내용

• useState 훅으로 state 변수를 추가하는 방법
• useState 훅이 반환하는 한 쌍의 값
• 둘 이상의 state 변수를 추가하는 방법
• state를 지역적이라고 하는 이유

---

 

 

◼ state 업데이트 하는 법  

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

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

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

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

 

 

---

 

 

◼ state 변수 추가하기  

useState를 사용하여 state를 추가, 업데이트를 합니다.

import { useState } from 'react';
const [index, setIndex] = useState(0);
index는 state 변수이고 setIndex 는 setter 함수입니다.

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

 

---

 

첫 번째 훅 만나기

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

훅은 React가 오직 렌더링 (JSX를 반환하려고 할때) 중일 때만 사용할 수 있는 특별한 함수힙니다.

이를 통해 다양한 React 기능을 “연결” 할 수 있습니다.

 

 

 

[주의하기]

훅(use로 시작하는 함수들)은 컴포넌트 내의 최상위 위치에 (최상의 컴포넌트 아님)또는 커스텀 훅에서만 호출할 수 있습니다.
조건문, 반복문 또는 기타 중첩 함수 내부에서는 훅을 호출할 수 없습니다. 훅은 함수이지만 컴포넌트의 필요에 대한 무조건적인 선언으로 생각하면 도움이 됩니다. 파일 상단에서 모듈을 “import”하는 것과 유사하게 컴포넌트 상단에서 React 기능을 “사용”합니다.

 

 

---

 

useState 해부하기

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

원하는 대로 이름을 지을 수 있지만, 규칙을 사용하면 프로젝트 전반에 걸쳐 상황을 더 쉽게 이해할 수 있습니다.

// index 변수, setIndex  setter 함수처럼 꼭 쌍을 이뤄야 합니다.
const [index, setIndex] = useState(0);



// 동작 방식

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

 

 

 

---

 

 

 

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

하나의 컴포넌트에 원하는 만큼 많은 타입의 state 변수를 가질 수 있습니다.

하지만 두 state 변수를 자주 함께 변경하는 경우에는 두 변수를 하나로 합치는 것이 더 좋을 수 있습니다. 예를 들어, 필드가 많은 폼의 경우 필드별로 state 변수를 사용하는 것보다 하나의 객체 state 변수를 사용하는 것이 더 편리합니다. 더 많은 팁은 state 구조 선택에서 확인할 수 있습니다.

 

 

 

React는 어떤 state를 반환할지 어떻게 알 수 있을까요?

useState 호출은 실제로 "식별자"를 사용하여 특정 state 변수를 참조하지 않습니다. 대신, useState는 컴포넌트의 모든 렌더링에서 안정적인 호출 순서에 의존합니다. 이는 useState가 항상 동일한 순서로 호출되기 때문에 가능합니다.

React 내부에서는 모든 컴포넌트에 대해 한 쌍의 state 배열을 유지합니다. useState를 호출할 때마다 React는 다음 state 값을 제공하고 내부적으로 인덱스를 증가시킵니다. 이것이 useState가 어떻게 작동하는지에 대한 핵심 원리입니다.

이러한 동작은 대부분의 경우 잘 작동하지만, 때로는 예상치 못한 문제가 발생할 수 있습니다. 이를 방지하기 위해 보통 린터 플러그인을 사용하여 대부분의 실수를 잡아줍니다.

요약하면, useState 호출은 특정 state 변수를 참조하는 것이 아니라 안정적인 호출 순서에 의존합니다. 이를 통해 React는 컴포넌트의 상태를 효과적으로 관리할 수 있습니다.

 

 

 

---

 

 

 

◼ state는 격리되고 비공개로 유지됩니다.  

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

import Gallery from './Gallery.js';

export default function Page() {
  return (
    <div className="Page">
      <Gallery /> // 동일한 컴포넌트 1
      <Gallery /> // 동일한 컴포넌트 2
    </div>
  );
}

 

 

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

 

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

 

 

 

---

 

 

 

◼ 요약 

• 컴포넌트가 렌더링 간에 어떤 정보를 “기억”해야 할 때 state 변수를 사용합니다.
• state 변수는 useState 훅을 호출하여 선언합니다.
• 훅은 use로 시작하는 특별한 함수들입니다. 이들은 state와 같은 React 기능에 “연결”할 수 있도록 해줍니다.
• 훅은 import와 마찬가지로 반드시 호출되어야 합니다. useState를 포함한 훅을 호출하는 것은 컴포넌트나 다른 훅의 최상위 수준에서만 유효합니다.
• useState 훅은 현재 state와 이를 업데이트할 함수로 이루어진 한 쌍을 반환합니다.
• 여러 개의 state 변수를 가질 수 있습니다. React 내부에서는 그들을 순서대로 매칭합니다.
• state는 컴포넌트에 비공개입니다. 두 곳에서 렌더링하더라도 각각의 복사본은 고유한 state를 가집니다.

 

 

 

 

 

 

[참고]

https://ko.react.dev/learn/state-a-components-memory

https://www.youtube.com/watch?v=QZdFgH8X80A&list=PLjQV3hketAJkh6BEl0n4PDS_2fBd0cS9v&index=16