2022 03 20 하이오더 컴포넌트 예제

url과 컴포넌트를 받아서 데이터 로딩이 되기 전까지 로딩중이라는 메시지를 띄워주는 하이오더컴포넌트.

 

import React, {useState, useEffect, Component, Fragment} from 'react';

const DataComponent = (ComposedComponent, url) => {
    return class DataComponent extends Component{
        constructor(props) {
            super(props);
            this.state = {
                data: [],
                loading: false,
                loaded: false
            }
        }

        componentWillMount() {
            this.setState({loading: true})
            fetch(url)
                .then(data => this.setState({
                    loaded: true,
                    loading: false,
                    data
                }))
        }

        render() {
            return (
                <div>
                    {
                        (this.state.loading) ?
                            <div>데이터 로딩중...</div> :
                            <ComposedComponent {...this.state}/>
                    }
                </div>
            );
        }
    }
}

const CountryNames = ({data, selected=""}) => {
    return(
        <select>
            {
                data.map(({name}, i) => {
                    <option value={name}>{name}</option>
                })
            }
        </select>
    )
}

const CountryDropDown = DataComponent(CountryNames, "https://restcountries.eu/rest/v1/all")
function App (){
    return (
        <CountryDropDown/>
    )
}
export default App