읽기hooks에서 여러 상태 정의

입문

"hooks 읽기 시도" 이 글의 후속.
이번에도 개인의 필기 수준입니다.

hooks에서 여러 상태 정의

글쎄, 제목이지만 구성 요소를 만들 때 훅을 이용하여 여러 가지 상태를 가지려면 당연히 필요하다.이런 상황에서 여러 개를 정의하는 것은 전혀 문제가 없다.
예는 다음과 같습니다.
또한 이 함수 구성 요소는 밖에서props를 받아들였다.이 때 defaultProps 에서 props 에 값이 전달되지 않을 때의 기본값이 정의됩니다.
세 가지 상태 정의

const App = (props) => {

    const [title, setTitle] = useState(props.title);
    const [author, setAuthor] = useState(props.author);
    const [price, setPrice] = useState(props.price);

    const reset = () => {
        setPrice(1000);
        setAuthor(props.author);
        setTitle(props.title);
    }

    return(
        <>
            <p>
                {author}の新譜が発表されました。
                タイトルは{title}です。<br />

                値段はあたなが自由につけられます。<br />
                いくらで買いますか？<br />
            </p>
            <p>
                {price}円で買います。
            </p>

            <div>
                <button onClick={()=> setPrice(price + 100)}>+100</button>
                <button onClick={()=> setPrice(price - 100)}>+100</button>
                <button onClick={reset}>Reset</button>
            </div>

            <label htmlFor="author">Author</label>
            <input id="author" type="text" value={author} onChange={(e) => setAuthor(e.target.value)}/>

            <label htmlFor="title">Title</label>
            <input id="title" type="text" value={title} onChange={(e) => setTitle(e.target.value)}/>

        </>
    )
}

App.defaultProps = {
    title: '',
    author: '',
    price: 1000
}

export default App;

조금만 더 재구성할게요.

useState에서 전달되는 초기값 매개 변수는 대상을 전달할 수 있습니다.
상태를 더 추상적으로 정의할 수 있다.
다음은 구현 예입니다.
재구성

const App = (props) => {

    const [state, setState] = useState(props);
    const reset = () => {
        setState(props);
    };

    return(
        <>
            <p>
                {state.author}の新譜が発表されました。
                タイトルは{state.title}です。<br />

                値段はあたなが自由につけられます。<br />
                いくらで買いますか？<br />
            </p>
            <p>
                {state.price}円で買います。
            </p>

            <div>
                <button onClick={()=> setState({...state, price: state.price + 100})}>+100</button>
                <button onClick={()=> setState({...state, price: state.price - 100})}>+100</button>
                <button onClick={reset}>Reset</button>
            </div>

            <label htmlFor="author">Author</label>
            <input id="author" type="text" value={state.author} onChange={(e) => setState({...state, author: e.target.value})}/>

            <label htmlFor="title">Title</label>
            <input id="title" type="text" value={state.title} onChange={(e) => setState({...state, title: e.target.value})}/>

        </>
    )
}

App.defaultProps = {
    title: '',
    author: '',
    price: 1000
}

export default App;

기본적으로 함수 구성 요소로 실시하는 방침이 비교적 좋다.
클래스 구성 요소에서 실현할 기회가 있다면 기존의 클래스 구성 요소를 계승하여 기능을 확장하거나 제3자의 클래스 구성 요소를 확장하고 싶을 때?
아무래도 빨리 익숙하게 사용할 수 있도록 정익구정