React 공식문서 - State: A Component's Memory(컴포넌트의 메모리)

컴포넌트는 폼에 입력하면 입력 필드가 업데이트되어야 하고, "구매"를 클릭하면 제품이 장바구니에 담겨야하는 등 현재 입력값, 장바구니와 같은 것들을 "기억"해야하는데, React에서는 이런 종류의 컴포넌트별 메모리를 state라고 부른다.

---

When a regular variable isn't enough(일반 변수로 충분하지 않은 경우)

 

일반 변수를 사용하게 되면 다음 두가지 이유로 변경 사항이 표시되지 않는다.

1. 지역 변수는 렌더링 간에 유지되지 않는다 : React는 컴포넌트를 두 번째로 렌더링할 때 지역 변수에 대한 변경사항을 고려하지 않고 처음부터 렌더링한다.

2. 지역 변수를 변경해도 렌더링을 발생시키지 않는다 : React는 새로운 데이터로 컴포넌트를 다시 렌더링해야 한다는 것을 인식하지 못한다.

 

React의 useState 훅은 렌더링 사이에 데이터를 유지하기 위한 state 변수와 변수를 업데이트하고 React가 컴포넌트를 다시 렌더링하도록 촉발하는 state 설정자 함수를 제공한다.

 

---

Adding a state variable(state 변수 추가하기)

 

state 변수를 추가하려면 파일 상단에서 React의 useState를 import 해야한다.

 

기존의 지역 변수와 지역 변수를 업데이트 하는 함수를 useState를 사용해야한다.

import { useState } from 'react';

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

 

---

Meet your first Hook(첫 번째 훅 만나기)

 

React에서는 useState를 비롯해 "use"로 시작하는 다른 함수를 훅(hook)이라고 부른다.

 

훅은 React가 렌더링 중일 때만 사용할 수 있는 특별한 함수로 다양한 React 기능을 연결할 수 있다.

 

* 훅(use로 시작하는 함수)은 “컴포넌트의 최상위 레벨” (최상위 컴포넌트 아님) 또는 커스텀 훅에서만 호출할 수 있고 조건문, 반복문 또는 기타 중첩된 함수 내부에서는 훅을 호출할 수 없다.

---

Anatomy of useState(useState 해부하기)

 

useState를 사용한다는 것은 React에게 이 컴포넌트가 무언가를 기억하기를 원한다고 말하는 것이다.

 

useState가 반환하는 state 변수와 state 변수를 설정하는 함수의 이름은 보통 [something, setSomething]과 같이 지정하는 것이 일반적이다.

 

useState의 유일한 인수는 state 변수의 초기값이다.

---

Giving a component multipe state variables(컴포넌트에 여러 state 변수 지정하기)

 

하나의 컴포넌트에서는 원하는 만큼의 많은 유형의 state 변수를 가질 수 있고, 서로 연관이 없는 경우 여러 개의 state 변수를 갖는 것이 좋다. 만약 두개의 state 변수를 자주 함께 변경한다면 객체를 값으로 하는 하나의 state 변수를 만드는게 편리하다.

 

* React의 useState 훅이 어떻게 동작하는지에 대한 아이디어 예제

let componentHooks = [];
let currentHookIndex = 0;

// How useState works inside React (simplified).
function useState(initialState) {
  let pair = componentHooks[currentHookIndex];
  if (pair) {
    // This is not the first render,
    // so the state pair already exists.
    // Return it and prepare for next Hook call.
    currentHookIndex++;
    return pair;
  }

  // This is the first time we're rendering,
  // so create a state pair and store it.
  pair = [initialState, setState];

  function setState(nextState) {
    // When the user requests a state change,
    // put the new value into the pair.
    pair[0] = nextState;
    updateDOM();
  }

  // Store the pair for future renders
  // and prepare for the next Hook call.
  componentHooks[currentHookIndex] = pair;
  currentHookIndex++;
  return pair;
}

function updateDOM() {
  // Reset the current Hook index
  // before rendering the component.
  currentHookIndex = 0;
  let output = Gallery();

  // Update the DOM to match the output.
  // This is the part React does for you.
  nextButton.onclick = output.onNextClick;
  header.textContent = output.header;
  moreButton.onclick = output.onMoreClick;
  moreButton.textContent = output.more;
  image.src = output.imageSrc;
  image.alt = output.imageAlt;
  if (output.description !== null) {
    description.textContent = output.description;
    description.style.display = '';
  } else {
    description.style.display = 'none';
  }
}

let nextButton = document.getElementById('nextButton');
let header = document.getElementById('header');
let moreButton = document.getElementById('moreButton');
let description = document.getElementById('description');
let image = document.getElementById('image');
let sculptureList = [{
  name: 'Homenaje a la Neurocirugía',
  artist: 'Marta Colvin Andrade',
  description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
  url: 'https://i.imgur.com/Mx7dA2Y.jpg',
  alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'  
}, {
  name: 'Floralis Genérica',
  artist: 'Eduardo Catalano',
  description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
  url: 'https://i.imgur.com/ZF6s192m.jpg',
  alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
}];

// Make UI match the initial state.
updateDOM();

---

State is isolated and private(state는 격리되고 프라이빗 합니다)

 

state는 화면의 컴포넌트 인스턴스에 지역적이기 때문에, 동일한 컴포넌트를 두 곳에서 렌더링하면 각 사본은 완전히 격리된 state를 갖게된다.

 

이것이 모듈 상단에 선언하는 일반 변수와 state의 차이이며, state는 특정 함수 호출에 묶이지 않고 코드의 특정 위치에 묶이지 않지만, 화면성의 특정 위치에 "지역적"이다.

 

만약 두 컴포넌트의 state를 동기화하려면, 각 컴포넌트에서 state를 제거하고 가장 가까운 공유 부모 컴포넌트에 state를 추가하는 방법이 있다.

---

* 참고 : React 공식문서(https://react-ko.dev/learn)