React state는 뭔가

Intro. State 상태란 무엇인가

리액트에서는 변수를 사용하는 방법이 다양하다. 구글에 검색해보면, state를 설명 할 때에 변수 즉 데이터를 저장하는 공간으로 자주 설명하는 것을 볼 수 있다.

React docs에서는 State: A Component’s Memory라 소개하고 있다. 구성 요소들의 저장 공간이란거다
화면을 구성하고 있는 요소들은 유저와 상호작용 할 때에 표시 되는 값이 바뀌는 경우가 있다.
리액트에서는 이러한 변화하는 요소들의 값을 저장한다는 개념에서 state를 사용한다

굳이 State를 써야하는가? 우리에겐 변수가 있는걸

React docs에서 좋은 예시가 있어 들고 왔다

import { sculptureList } from './data.js';

export default function Gallery() {
  let index = 0;

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

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handleClick}>
        Next
      </button>
      <h2>
        <i>{sculpture.name} </i> 
        by {sculpture.artist}
      </h2>
      <h3>  
        ({index + 1} of {sculptureList.length})
      </h3>
      <img 
        src={sculpture.url} 
        alt={sculpture.alt}
      />
      <p>
        {sculpture.description}
      </p>
    </>
  );
}

클릭을 하면, index가 증가하는 페이지임을 알 수 있다. 하지만 이 코드는 실제로 동작하지 않는다.
이런 문제를 우린 HTML을 공부할 때 겪은 적이 있다. 페이지 렌더링 로직 문제로 이벤트 리스너가 작동하지 않는 경우를 겪어 보았는가

그 이유는 2가지 때문이다. 리액트도 동일한 이유로 문제가 발생한다

1. 지역 변수는 렌더링 간에 유지되지 않는다
   • React가 구성 요소를 변경하면, 다시 처음부터 렌더링한다
   • 결국 초기 값이 계속 반복해서 나오는 결과를 낳는다
2. 로컬 변수를 변경해도 렌더링이 트리거되지 않는다.
   • React는 새 데이터로 구성 요소를 다시 렌더링해야 한다는 것을 인식하지 못한다.

결론적으로, 사용자와 상호작용을 할 때, 화면 구성 요소들의 값을 지속적으로 유지하고 렌더링하기 위해 리액트는 state를 만들었다

그렇다면, 어떻게 사용할 것인가?

import { useState } from 'react';

const [index, setIndex] = useState(0);
// 이벤트 리스너에 추가 할 함수
function handleClick() {  
	setIndex(index + 1);  
}

위는 예시 코드이다. useState는 [값, Setter] 구조로 사용되고, useState([초기 값]) 형태로 초기화 가능하다
즉 index는 실제 데이터가 저장 되는 곳, setIndex는 index를 변경하기 위한 함수이다

index의 값을 변경 시키고 싶으면, setIndex(index+1) 형태로 사용하면 된다

레퍼런스

• React docs - state