Chapter 2. Adding Interactivity

#2 State: 컴포넌트의 메모리

학습 목차

1. 일반 변수로 충분하지 않은 경우
2. state 변수 추가하기
3. 컴포넌트에 여러 state 변수 지정하기
4. state는 격리되고 프라이빗하다.

---

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

• 지역 변수는 렌더링 간에 유지되지 않는다.
  React는 이 컴포넌트를 두 번째로 렌더링할 때 지역 변수에 대한 변경 사항을 고려하지 않고 처음부터 렌더링한다.
• 지역 변수를 변경해도 렌더링을 발동시키지 않는다.
  React는 새로운 데이터로 컴포넌트를 다시 렌더링해야 한다는 것을 인식하지 못한다.
• 컴포넌트를 새 데이터로 업데이트하려면 두 가지 작업이 필요하다.
  1. 렌더링 사이에 데이터를 유지한다.
  2. 새로운 데이터로 컴포넌트를 렌더링(리렌더링)하도록 React를 트리거한다.
• useState 훅은 이 두 가지를 제공한다.
  1. 렌더링 사이에 데이터를 유지하기 위한 state 변수.
  2. 변수를 업데이트하고 React가 컴포넌트를 다시 렌더링하도록 트리거하는 state 설정자 함수.

2. state 변수 추가하기

1. state 변수를 추가하려면 파일 상단에 있는 React에서 useState를 import한다.
   import { useState } from 'react';

2. 아래에 해당 줄을
   let index = 0;

3. 다음과 같이 바꾼다.
   const [index, setIndex] = useState(0);

• index는 state 변수이고 setIndex는 설정자 함수입니다.

여기서 [ 와 ] 구문을 배열 구조분해라고 하며, 배열에서 값을 읽을 수 있다.
useState가 반환하는 배열에는 항상 정확히 두 개의 항목이 있습니다.

2-1. 첫 번째 훅 만나기

• React에서는 useState를 비롯해 ”use“로 시작하는 다른 함수를 훅(hook)이라고 부른다.
• 훅은 React가 렌더링 중일 때만 사용할 수 있는 특별한 함수이다.
• 이를 통해 다양한 React 기능을 “연결”할 수 있습니다.
• state는 이러한 기능 중 하나이다.

주의

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

2-2. useState 해부하기

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

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

• 이 경우 React가 index를 기억하기를 원하는 것이다.

KeyNote

• 이 쌍의 이름은 const [something, setSomething]과 같이 지정하는 것이 일반적이다.
• 원하는 대로 이름을 지을 수 있지만, 규칙을 정하면 프로젝트 전반에서 이해하기 쉬워진다.

• useState의 유일한 인수는 state 변수의 초기값이다.
  이 예제에서는 useState(0)에 의해 index의 초기값이 0으로 설정되어 있다.

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

  1. 저장한 값을 가진 state 변수(index).
  2. state 변수를 업데이트하고 React가 컴포넌트를 다시 렌더링하도록 트리거 할 수 있는 state 설정자 함수 (setIndex).

• 실제 작동 방식은 아래와 같다.
  const [index, setIndex] = useState(0);

  1. 컴포넌트가 처음 렌더링된다.
     index의 초기값으로 0을 useState에 전달했으므로 [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]를 반환한다.

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

• 하나의 컴포넌트에 원하는 만큼 많은 유형의 state 변수를 가질 수 있다.
• 두 개의 state 변수를 자주 함께 변경하는 경우에는 두 변수를 하나로 합치는 것이 더 좋을 수 있다.
• 예를 들어, 필드가 많은 폼의 경우 필드별로 state 변수를 사용하는 것보다 객체를 값으로 하는 하나의 state 변수를 사용하는 것이 더 편리하다.
  자세한 팁은 state 구조 선택에서 확인가능하다.

4. state는 격리되고 프라이빗하다.

• state는 화면의 컴포넌트 인스턴스에 지역적이다.
• 즉, 동일한 컴포넌트를 두 군데에서 렌더링하면 각 사본은 완전히 격리된 state를 갖게 된다.
• 이 중 하나를 변경해도 다른 컴포넌트에는 영향을 미치지 않는다.
• state는 특정 함수 호출에 묶이지 않고, 코드의 특정 위치에 묶이지도 않지만, 화면상의 특정 위치에 “지역적”이다.
• props와 달리 state는 이를 선언하는 컴포넌트 외에는 완전히 비공개이며, 부모 컴포넌트는 이를 변경할 수 없다.
• 따라서 다른 컴포넌트에 영향을 주지 않고 state를 추가하거나 제거할 수 있다.
• 두 컴포넌트의 state를 동기화하려면 어떻게 해야 할까?
  React에서 이를 수행하는 올바른 방법은 자식 컴포넌트에서 state를 제거하고 가장 가까운 공유 부모 컴포넌트에 추가하는 것이다.

---

요약

• 컴포넌트가 렌더링 사이에 일부 정보를 “기억”해야 할 때 state 변수를 사용한다.
• state 변수는 useState 훅을 호출하여 선언한다.
• 훅은 use로 시작하는 특수 함수입니다. state와 같은 React 기능을 “연결”할 수 있게 해준다.
• 훅은 모듈에서 import할 때와 마찬가지로, 컴포넌트 안에서 조건과 무관하게 항상 호출해야 한다.
  useState를 포함한 훅을 호출하는 것은 컴포넌트나 다른 훅의 최상위 레벨에서만 유효하다.
• useState 훅은 현재 state와 이를 업데이트할 함수로 이루어진 한 쌍을 반환하다.
• state 변수는 둘 이상 가질 수 있다.
  내부적으로 React는 이를 순서대로 일치시킨다.
• state는 컴포넌트 외부에 비공개된다.
  두 곳에서 렌더링하면 각 복사본은 고유한 state를 갖게 된다.

---

React 공식 문서

https://react.dev/

React 비공식 번역 문서

https://react-ko.dev/

MDN

https://developer.mozilla.org/ko/

Wikipedia

https://ko.wikipedia.org/wiki/