서론

리액트 컴포넌트에서 유저와의 상호작용으로 인해 데이터들이 업데이트 되어야하는 경우가 많다.

예를 들어, 사진들을 볼 수 있는 갤러리 페이지에서 다음 버튼 클릭 시, 페이지 index를 다음 페이지 index로 업데이트하여 페이지 UI를 변경하거나 사용자가 구매할 제품을 장바구니에 담거나 등등 여러 상황들이 있다.

React에서는 이렇게 렌더링이 완료된 이후 유동적으로 업데이트 되어야하는 데이터 메모리를 state(상태) 라고 한다.

여기 피드에서는 내가 그동안 사용하면서 아예 몰랐거나 얕게 알고 있었던 부분들을 중심으로 알아보려고 한다.

본론

Component에 여러 개의 상태 변수 사용하기

하나의 React Component 에서는 꼭 state를 1개만 사용해야한다는 규칙은 없다.
다만, 상태 데이터가 관리되는 로직 유형에 따라 하나의 state에 여러 데이터를 할당하거나 각각 state를 별도로 선언하면 된다.

단일 state에 여러 데이터 선언하여 관리하기

import { useState } from 'react';

const ProductsList = () => {
  const [pageIdx, setPageIdx] = useState(0);
  const [collapse, setCollapse] = useState(false); 
  
	return (...)
}

예를 들어, 위와 같이 상품들이 접이식 리스트 테이블 형태로 나열되는 컴포넌트가 있을 때 현재 테이블 페이지 위치, 접기 여부 는 각각 관련없는 유형의 데이터이므로 state를 따로 선언하여 관리하는 것이 좋다.
하지만, 동시에 2개 이상의 state 를 변경해야할 경우, 아래와 같이 하나의 state 에 object 형식으로 결합하여 관리하는 것이 더 효율적일 것이다.

import { useState } from 'react';

const ProductsList = () => {
  const [gallery, setGallery] = useState({
	pageIdx: 0,
    collapse: false,
  });
  
  setGallery({
  	pageIdx: 1,
    collapse: true
  })
  
	return (...)
}

⚠️ React Hook 함수 사용 시, 주의사항 !

Hook 함수들은 use- 접두사로 시작하며, 자주 사용되는 Hook 함수들을 예를 들면 다음과 같다.

- useState
- useCallback
- useMemo
- useReduce
- useRef
- useEffect

이러한 Hook 함수들은 React Component 내에서 최상위 스코프 또는 자체적으로 작성한 Hook 에서만 호출할 수 있다.
이는 결론적으로 조건문, 반복문 또는 중첩 함수 내에서는 호출할 수 없다는 뜻이기도 하다.