반응 시리즈 - 3 [상태]

상태는 생성된 구성 요소와 관련된 일부 형식의 데이터를 보유하는 구성 요소의 개체입니다.

State 객체는 생성된 구성 요소에 대해 비공개입니다. 일부 형태의 정보를 렌더링하기 위해 구성 요소에 전달하는 '정적' 데이터인 props와 달리 구성 요소가 관리하는 동적 데이터로 생각할 수 있습니다.

상태 객체의 값을 수정하면 생성된 구성 요소 인스턴스가 다시 렌더링되어 업데이트된 값을 표시합니다.

원래 '상태'는 클래스 기반 구성 요소에서만 사용할 수 있었지만 '후크'라는 새로운 기능이 추가되면서 기능적 구성 요소가 클래스 기반 구성 요소에 있는 추가 기능을 사용할 수 있게 되었습니다.

상태 사용 방법

상태를 설명하는 간단한 프로젝트를 살펴보겠습니다. 이 sandbox를 방문하십시오.
게임을 '구매'하기 위한 단순한 인터페이스일 뿐입니다.

import React,{ useState, useRef } from 'react';
컴포넌트 GamePick에서 useState 및 useRef와 함께 react를 가져옵니다. 둘 다 React Hooks입니다.

또한 구성 요소에 대한 CSS 파일을 가져옵니다.

기능적 구성 요소에서 상태는 'useState()' 후크를 사용하여 정의됩니다. 상태의 초기 값을 매개 변수로 사용하고 두 값이 있는 배열을 반환합니다. 상태 개체를 업데이트하는 데 사용할 수 있는 매개 변수 및 함수로 전달된 값입니다.

In functional components states can't be modified like normal variables, only through the use of the function that useState returns.

const [purchaseOutput, setPurchaseOutput] = useState("No purchases made.");
const [priceVal, setPriceVal] = useState();
const currentProduct = useRef("");

구성 요소의 정의에서 상태를 만들고 구조 분해를 사용합니다. 변수 purchaseOutput에 전달하고 업데이트 기능도 변수 setPurchaseOutput에 전달합니다.

제품 가격을 처리할 또 다른 상태도 생성됩니다. 다른 옵션을 선택하면 입력 요소의 가격이 변경되기를 원합니다.
ref 후크를 사용하여 currentProduct 객체useRef()를 정의합니다. 현재 선택된 옵션이 무엇인지 알아야 합니다.

useRef() essentially lets us define an object that exists throughout the lifetime of the component instance it is defined in. In this case, think of it as being similar to useState except that when a ref objects' value is updated/modified, it doesn't cause the component to re-render itself. The value of an object created using useRef is accessed and modified using the .current method not a function like states. A proper explanation.

JSX 코드로 이동하면 비활성화된 입력 요소 및 버튼과 함께 간단한 선택 요소가 있습니다. 이 요소는 모두 divs'로 둘러싸여 있고 스타일링을 위해 지정된 클래스입니다. 상태는 JSX 코드에서 필요한 위치에 배치됩니다.

className is the equivalent of writing a normal class attribute in HTML

선택 요소에서 onChange 이벤트를 수신하고 옵션을 선택하면 selectHandler 함수를 호출합니다.

const selectHandler = (event) => {
        setPriceVal(prices[event.target.value]);
        currentProduct.current = event.target.value;
    }

selectHandler 함수에서 단순히 priceVal 상태(입력 요소에 표시된 값)의 값을 업데이트하고 currentProduct를 업데이트하고 해당 값을 현재 선택한 옵션으로 설정합니다.

또한 버튼에서 onClick 이벤트를 수신하고 트리거될 때 buyHandler 함수를 호출합니다.

const buyHandler = () => {
        if (currentProduct.current !== "")
        {
            setPurchaseOutput(`${products[currentProduct.current]} purchased for ${prices[currentProduct.current]}.`);
        }
    }

여기서는 선택한 옵션이 요소의 기본값이 아닌 경우에만 purchaseOutput 상태를 업데이트합니다.

코드를 더 잘 이해하려면 샌드박스에서 앱을 사용해 보세요.

제대로 이해하지 못한 부분이 있으면 아래에 댓글을 달아 주시면 도와 드리겠습니다. 읽어 주셔서 감사합니다