[React] state, useState

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

State

state

웹페이지에서 상호작용으로 화면의 내용을 변경해야 하는 경우
양식 입력하면 입력 필드가 업데이트 되거나, '다음'버튼을 누르면 표시되는 내용이 변경되거나, '구매'버튼을 클릭하면 장바구니에 담기게 되는 등
컴포넌트는 현재의 입력 값, 내용, 장바구니 등을 기억해야 한다!
React에서는 이러한 종류의 구성요소별 메모리를 state 라 부른다.

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

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>
    </>
  );
}

코드에서 handleClick() 이벤트 핸들러는 index라는 지역 변수를 변경하는 함수이다.

다만 위 코드로 작성된 페이지에서는 index의 변화를 바로 확인할 수 없다.
즉 Next 버튼을 눌러 이벤트 핸들러가 작동되어도 뷰페이지에서는 아무런 변화가 일어나지 않는다.
이는 지역변수가 다음 두 가지 특성을 갖기 때문이다.

1. 지역 변수의 변경으로는 렌더링이 자동으로 이루어지지 않는다.
2. 지역 변수의 변경은 렌더를 트리거하지 않는다. (리액트는 React는 바뀐 값으로 다시 렌더링해야 한다는 것을 인식하지 못한다)

useState

Destructuring

// 각 변수에 특정 값 저장하는 방법 

// 1. 배열에 넣고 인덱스로 접근해 저장 
let num = [1,2];
let a = num[0];
let b = num[1];
// a == 1 , b == 2 

// 2. Destructuring 
let [c,d] = [1,2];
// c == 1 , d == 2

useState

useState는 const [ something, setSomething ] = useState(변수 초기값); 의 형식으로 사용되며, useState는 [something 값, setSomething(함수)]을 반환한다.

1. something: state 변수, 두 렌더 사이의 데이터를 유지해준다.
2. setSomething : 변수를 업데이트하고 React를 트리거해 구성 요소를 다시 렌더링하게 해주는 state 설정 함수(state setter function)이다.

참고)
통상적으로 const [ something, setSomething ] 형식으로 변수명을 작성한다.
마음대로 작성할 수 있지만, 컨벤션을 따르면 코드를 이해할 때 도움이 될 것!

앞에서 작성한 코드에 state를 적용하여 값이 변경될 때마다 페이지가 렌더되어 변경 값을 확인할 수 있도록 수정해보자.

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

export default function Gallery() {
//  let index = 0;
  const [index, setIndex] = useState(0);  //useState 사용 
  

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

const [index, setIndex] = useState(0);
index가 state 변수, setIndex가 state setter function이다.

useState 동작 과정

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

위 예시 코드를 통해 동작 과정을 확인해보자.

1. 구성 요소가 처음으로 렌더된다
useState의 초기값으로 0을 index에 전달했기 때문에 useState는 [0, setIndex]을 반환한다.
React는 state 변수의 최신 값인 0을 기억한다.

2. state가 업데이트된다
유저가 버튼을 클릭하면, 핸들러 함수가 setIndex(index+1)을 호출한다. indxe가 0이기 때문에, setIndex(1)이 적용되어 index 값이 1로 변경된다.
이는 React가 index 값을 1로 기억하게 만들고 렌더를 트리거한다.

3. 두 번째 렌더가 진행된다
React는 [1, setIndex]를 반환한다.