예제로 이해하는 React의 useState

2024년 10월 30일 ・ 읽는 시간 6분

React 버전 16.8부터 Hook이라는 기능이 소개됐습니다. Hook은 함수형 컴포넌트에서도 React의 상태 및 생명주기 기능을 연동할 수 있게 하는 기능이에요. React에서 제공하는 Hook이 있고, 직접 커스텀 Hook을 정의할 수도 있어요.

이번 아티클에서는 React에서 제공하는 useState Hook을 결제 예제로 알아볼게요.

React에서 가장 자주 사용하는 Hook 중 하나는 바로 useState입니다. 함수형 컴포넌트에서 상태(State) 관리를 가능하게 합니다. useState는 클래스 컴포넌트, 반복문, 조건문, 중첩된 함수에서 선언할 수 없어요. useState는 null과 같은 초기 상태 값이 필요해요.

결제 예제로 useState를 이해해볼게요. 계속 변경되는 값을 선언할 때 useState를 사용하면 편해요. 결제에서는 쿠폰, 제품 수량 때문에 결제 금액이 자주 바뀌죠. 이렇게 계속 바뀌는 결제 금액을 useState로 선언해볼게요. 5만원의 결제 금액은 아래와 같이 선언할 수 있습니다.

useState는 초기화 값을 파라미터로 받습니다. 결제 금액을 5만원으로 설정하고 싶기 때문에 50000을 파라미터로 넣었어요. 초기화 값으로는 숫자뿐만 아니라 문자열, 객체, 배열 등 다양한 타입의 값을 넣을 수 있어요.

반환 값으로는 amount, setAmount가 있는 배열이 돌아옵니다.

• amount는 현재 상태 값입니다. 예제에서는 결제 금액인 거죠.
• setAmount는 상태 값을 업데이트할 수 있는 함수입니다. 상태를 'set'하기 때문에 Setter 함수라고 불러요.

Setter 함수로 결제 금액을 업데이트해볼게요. 1만원 쿠폰을 적용해서 결제 금액이 4만원이 되었다고 가정할게요. 응답으로 받은 setAmount 함수를 아래와 같이 호출하면, 결제 금액(amount)이 50000에서 40000으로 바뀌어요.

하지만 결제 금액은 4만원에서 3만원이 될 수도 있고, 3만원에서 2만원이 될 수도 있죠. 그래서 이전의 결제 금액을 기억하고, 해당 금액에서 1만원을 차감하려면 setAmount의 파라미터로 콜백 함수를 설정해주세요. 콜백 함수의 파라미터로는 이전 상태 값(prevState)을 설정하고요. 그럼 이제 기존 결제 금액에서 항상 1만원이 차감돼요.

이런식으로 useState를 사용하면 매우 간편하게 상태 관리를 할 수 있어요. 그렇기 때문에 useState는 장바구니 총액, 쿠폰 할인과 같이 UI에서 자주 바뀌는 동적 데이터 관리에 이상적입니다.

setAmount와 같은 Setter 함수는 호출되면 전체 컴포넌트가 다시 렌더돼요. 예를 들어 위 코드의 changeAmount() 함수를 호출하면 CheckoutPage()가 다시 렌더링됩니다.

위 예시에서는 setAmount를 다른 함수 감싸서 사용했는데요. 만약에 아래 코드와 같이 컴포넌트 안에서 setAmount 바로 호출하면 어떻게 될까요?

Too many re-renders. React limits the number of renders to prevent an infinite loop. 에러가 발생해요. setState 함수를 호출되면 컴포넌트가 리렌더된다고 말씀을 드렸는데요. 위 코드에서는 컴포넌트 렌더 → setAmount → 컴포넌트 리렌더 → setAmount ...의 무한 루프가 생겨서 에러가 발생합니다. 상태 값은 특정 이벤트로 인해 바뀌기 때문에 실제로 컴포넌트에서 바로 호출할 이유도 없고요.

useState를 선언하는 방법과 상태를 업데이트하는 방법을 알아봤어요. 이제 결제할 때 1만원 쿠폰을 적용하는 예시로 볼게요.

먼저 useState로 결제 금액과 쿠폰 적용 여부 상태를 선언해주세요. 다음, 쿠폰을 적용 로직을 담고 있는 toggleDiscount 함수를 정의하세요. 쿠폰이 적용되어 있지 않으면 결제 금액에서 1만원을 빼고, 적용되어 있다면 결제 금액에 다시 1만원을 더해요.

마지막으로 쿠폰박스를 만들고, 체크를 누를 때 toggleDiscount 함수를 불러주세요. 아래 코드를 실행해보면 결제 금액이 바뀌는 것을 볼 수 있습니다.