React Hook useState - React Vernacular Movement 11

머리말

이전 기사에서는 React 구문에 대해 더 자세히 설명했습니다. React 라이프사이클 - React Vernacular Movement 10 React 생명주기의 3단계를 배웠고, 클래스 객체와 함수 객체의 생명주기도 배웠습니다. 이 문서에서는 예제를 사용하여 Hook의 useState를 설명합니다.

useState란 무엇입니까?
등급 UI 요소 만들기
이 구성 요소를 리팩터링
이 구성 요소에 useState 후크를 추가하세요.
평가 구성 요소에 대한 수정 기능을 추가하기 위해 setState를 추가했습니다.
이전 버전의 React 상태 관리 작성 방법

useState란 무엇입니까?

사용상태 이는 React의 Hook으로, 함수 구성 요소에 상태를 추가하는 데 사용됩니다. 사용상태, 함수 구성 요소에서 상태 데이터를 정의하고 관리할 수 있습니다.

사용상태 다음을 포함하여 두 개의 값을 포함하는 배열을 반환합니다.

현재 상태: 구성 요소가 처음 렌더링될 때 해당 값은 우리가 전달한 값과 동일합니다. 사용상태 초기 값.
set 함수: 이 함수는 상태 값을 업데이트하고 구성 요소의 다시 렌더링을 트리거하는 역할을 합니다.

				
					const [state, setState] = useState(initialState)

등급 UI 요소 만들기

여기에서는 설명을 위해 Alex Banks와 Eve Porcello의 React 튜토리얼을 사용하지만 일부 코드가 약간 수정되었습니다.

이 글에서는 UI 페이지를 만들 것이므로 수백 개의 SVG 라이브러리가 내장된 반응 아이콘 패키지를 사용해야 합니다. 반응 아이콘 패키지를 다운로드하려면 터미널에 다음 명령을 입력할 수 있습니다.

				
					npm i 반응 아이콘

~을 통해 React 프로젝트 설정 – React Vernacular Movement 08 반응 프로젝트를 빠르게 생성하는 교육 단계입니다.

				
					npx 생성-반응-앱 my-app cd my-app npm 시작

이때 React 프로젝트가 로컬로 시작됩니다. 다음으로 App.js를 수정하여 다음과 같은 UI 컴포넌트를 얻습니다.

				
					import React from &#039;react&#039; import { FaStar } from &#039;react-icons/fa&#039; 내보내기 기본 함수 App() { return (<div>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
    </div>)
}

이 구성 요소를 리팩터링

리팩토링은 프로그램 결과를 변경하지 않고 전체 코드 품질을 향상시키기 위해 프로그램 코드를 다시 작성하는 것을 의미합니다.

다음으로, 전체 코드를 더욱 간결하게 만들기 위해 원본 코드를 재구성해야 합니다. 설명을 위해 이는 세 부분으로 나눌 수 있습니다.

리팩토링 첫 번째 단계

먼저 FaStar를 독립된 구성 요소로 분할하고 이 구성 요소에 매개 변수를 지정할 수 있습니다. 여기에 제공된 매개 변수는 선택된 인수이며 기본값은 true입니다.

				
					const Star = ({ selected = true }) => ( <FaStar color={selected ? 'red' : 'gray'}></FaStar> )

리팩토링 2단계

길이만 주어지면 배열을 빠르게 조합할 수 있는 함수를 만듭니다.

				
					const createArray = 길이 => [...Array(길이)];

리팩토링 3단계

마지막으로 사용된 UI에서는 ES6 배열 맵을 사용하여 해당 인덱스와 구성 요소가 맵 함수에 반환됩니다.

				
					기본 함수 내보내기 App({ totalStar = 5 }) { return createArray(totalStar).map((n, i) => <별표 키={i} />) }

재구성이 완료된 후에도 원래 프로그램 실행 결과는 변경되지 않고 최종적으로 별 5개가 반환됩니다.

				
					import React from 'react' import { useState } from 'react-icons/fa' const Star = ({ selected = true }) => ( <FaStar color={selected ? 'red' : 'gray'}></FaStar> ) const createArray = length => [...Array(length)]; 기본 함수 내보내기 App({ totalStar = 5 }) { const [selectedStars] = useState(3) return createArray (totalStar).map((n, i) => <별표 키={i} selected={selectedStars > i} />) }

이 구성 요소에 useState 후크를 추가하세요.

리팩토링된 코드에는 아직 관련 데이터나 상태가 추가되지 않았습니다. 여기서는 함수 구성 요소의 상태 관리를 위해 몇 가지 후크를 사용할 수 있습니다.

useState()는 Hook을 학습할 때 배울 첫 번째 함수입니다. 다음 구문을 통해 요소의 상태를 제공할 수 있습니다.

				
					const [variable,setVariable] = useState("");

다음 코드 예제에서는 앱 함수 구성 요소에 selectedStars라는 새 상태를 추가합니다. 그리고 selectedStars의 값을 3으로 설정하면 이 구성 요소에서 이 변수에 해당하는 렌더링을 수행할 수 있습니다.

				
					import React from 'react' import { useState } from 'react-icons/fa' const Star = ({ selected = true }) => ( <FaStar color={selected ? 'red' : 'gray'}></FaStar> ) const createArray = length => [...Array(length)]; 기본 함수 내보내기 App({ totalStar = 5 }) { const [selectedStars] = useState(3) return createArray (totalStar).map((n, i) => <별표 키={i} selected={selectedStars > i} />) }

왜냐하면 selectedStars가 3으로 설정되어 있고 판별식도 FaStar 구성 요소에 설정되어 있기 때문입니다. 선택된 경우 빨간색으로 표시되고, 그렇지 않으면 검정색으로 표시됩니다. 마지막으로 다음 구성 요소가 있습니다.

setState에 수정 기능이 추가되었습니다.

useState()는 사전 설정된 값을 제공하는 것 외에도 해당 값을 수정할 수도 있습니다. 여기에서 setState를 사용하여 수정할 수 있습니다.

StarRating에 새 setSelectedStars를 추가하고 구성 요소에서 사용할 수 있습니다. 여기서는 Star에 onSelect라는 함수 인수를 추가하고 setSelectedStars를 전달합니다.

				
					내보내기 함수 StarRating({ totalStars = 5 }) { const [selectedStars, setSelectedStars] = useState(3) return <div>
       {createArray(totalStars).map((n, i) =&gt; 
		<star 
    		key="{i}" 
    		selected="{selectedStars" > i} onSelect={() =&gt; setSelectedStars(i + 1)} /&gt; )}
        <p>
            별 {totalStars}개 중 {selectedStars}개
        </p>
    </div>
}

여기에서 onClick 함수에 전달된 함수 매개변수 setSelectedStars를 전달하면 모든 별 구성 요소를 클릭한 후 setSelectedStars()가 트리거됩니다.

				
					const Star = ({ selected = true, onSelect = f => f }) => ( <FaStar color={selected ? 'red' : 'gray'} onCLick={onSelect}></FaStar> )

전체 useState 코드도 여기에 첨부되어 있습니다.

				
					import React from &#039;react&#039; import { useState } from &#039;react-icons/fa&#039; const Star = ({ selected = true, onSelect = f =&gt; f }) =&gt; (
    <fastar color="{selected" ? 'red' : 'gray'} onclick="{onSelect}"></fastar>
) const createArray = length =&gt; [...Array(length)]; 내보내기 함수 StarRating({ totalStars = 5 }) { const [selectedStars, setSelectedStars] = useState(3) return <div>
        {createArray(totalStars).map((n, i) =&gt; 
		<star 
    		key="{i}" 
    		selected="{selectedStars" > i} onSelect={() =&gt; setSelectedStars(i + 1)} /&gt; )}
        <p>
            별 {totalStars}개 중 {selectedStars}개
        </p>
    </div>
}

이전 버전의 React 상태 관리 작성 방법

이전 버전은 클래스 구성 요소를 작성하는 이전 방법을 참조합니다. 후크는 함수 구성 요소에만 사용할 수 있기 때문입니다. 이 섹션에서는 카테고리 구성요소의 상태 관리를 보여줍니다. 그러나 카테고리 구성요소 자체에는 객체지향적인 개념이 있기 때문에 이해하기 어렵습니다.

데이터 상태의 기본값 및 업데이트를 수행하는 useState와 비교하여 생성자는 starSelected의 기본값을 0으로 제공하고 바인딩에 선언된 함수에 대한 변경을 수행하고 최종적으로 렌더링할 수 있습니다. render() 함수를 통해 컴포넌트를 생성합니다.

				
					import React, { Component } from &#039;react&#039; import { FaStar } from &#039;react-icons/fa&#039; const Star = ({ selected = true }) =&gt; (
    <fastar color="{selected" ? 'red' : 'gray'}></fastar>
) const createArray = length =&gt; [...Array(length)]; 기본 클래스 StarRating 확장 Component { constructor(props) { super(props); this.state = { starSelected: 0 }; change.bind(this); }change(starSelected){ this.setState({starSelected}); } render(){ const {totalStars} = this.props;
            <div>
                {[...Array(totalStars)].map((n,i)=&gt;{
                    <Star 
                        key={i} 
                        selected={i &lt; starSelected} onClick={()=&gt;this.change(i+1)} /&gt; })}
                <p>
                    별 {totalStars}개 중 {starSelected}개
                </p>
            </div>
        )
    }
}