React 연습: 사진 바꾸기

개요

새로고침 할 때 마다 날씨와 날씨 사진을 임의로 바꿔주는 것을 리액트를 이용해 써 보았다.

작동화면

코드내용

function getWeather() {
    const weatherCollection = ["sunny", "cloudy", "rainy", "foggy", "freezing"];
    return weatherCollection[Math.floor(Math.random() * weatherCollection.length)];
}

class WeatherPicker extends React.Component {
    render() {
        const weather = getWeather()

        let weatherPhoto;

        if(weather === "sunny") {
            weatherPhoto = <img src="https://img.resized.co/lovindublin_com/eyJkYXRhIjoie1widXJsXCI6XCJodHRwczpcXFwvXFxcL2ltYWdlcy5sb3ZpbmR1Ymxpbi5jb21cXFwvdXBsb2Fkc1xcXC9pbWFnZXNcXFwvX3JlbGF0ZWRFbnRyeUltYWdlMnhcXFwvU2NyZWVuLVNob3QtMjAxNy0wNS0wNi1hdC0xMy4yNC4wMi5wbmdcIixcIndpZHRoXCI6NzM2LFwiaGVpZ2h0XCI6NDEyLFwiZGVmYXVsdFwiOlwiaHR0cHM6XFxcL1xcXC9kMjZoZTAzOGE3MGRncy5jbG91ZGZyb250Lm5ldFxcXC93cC1jb250ZW50XFxcL3RoZW1lc1xcXC9sb3ZpblxcXC9hc3NldHNcXFwvaW1nXFxcL2NhcmQtZGVmYXVsdC1sb3Zpbi1kdWJsaW4ucG5nXCIsXCJvcHRpb25zXCI6W119IiwiaGFzaCI6ImM5YjA0YzY0MDY0YThjMDkwZTJlZjViZjIxNDU2ZTUyNDQ3MzViMzAifQ==/grey-skies-begone-the-sunny-weather-will-return-tomorrow.png" />
        } else if(weather === "cloudy") {
            weatherPhoto = <img src="https://cdn.24.co.za/files/Cms/General/d/9991/0cc234af2a14413a8c20d036989bb985.jpg"/>        
        } else if(weather === "rainy") {
            weatherPhoto = <img src="https://www.ekathimerini.com/resources/2019-07/rain-thumb-large1-thumb-large.jpg" />
        } else if(weather === "foggy") {
            weatherPhoto = <img src="https://images.unsplash.com/photo-1559759748-029511daa8aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1867&q=80"/>
        } else if(weather === "freezing") {
            weatherPhoto = <img src="https://mm.aiircdn.com/3/5a1e6d769d7b4.jpg"/>
        }
        
        return (
            <div>
                <h1>It's {weather} today!</h1>
                {weatherPhoto}
            </div>
        ) 
    }
}


ReactDOM.render(<WeatherPicker />, document.getElementById('root'));

다음에는 콤포넌트를 따로 생각하는 것, 그것들을 어떻게 조합하며, 이벤트들을 어떻게 부여할것인지를 구현해봐야겠다. 많이 공부하자!!