React App pt에서 API 사용하기. 2

오늘은 Open Map API 작업을 계속하여 데이터를 보다 동적으로 만드는 방법을 알아보겠습니다. 먼저 사용자 입력 필드를 구축하여 내 앱 사용자가 한 도시의 날씨만 가져오는 것이 아니라 원하는 도시를 입력할 수 있도록 하겠습니다.

이 작업을 수행하기 위해 forecast.js 구성 요소로 돌아가서 <button> 태그 내부의 코드를 리팩터링합니다. 사용자가 선택한 도시에 들어갈 수 있기를 원하므로 다음과 같은 <form> 태그를 추가해야 합니다.

           <form onSubmit={getForecast}>
                <input
                    type="text"
                    placeholder="Enter City"
                    maxLength="50"
                    value={city}
                    onChange={(e) => setCity(e.target.value)}
                    />
                <label>
                    <input

이제 브라우저로 이동하면 도시에 대한 입력 필드가 있는 것을 볼 수 있습니다. 다음으로 리팩토링하고 싶은 것은 현재 우리 온도가 켈빈으로 설정되어 있다는 사실입니다(그게 뭡니까?) 그래서 사용자에게 화씨 또는 섭씨 중에서 선택할 수 있는 옵션을 제공할 것입니다. 이를 달성하기 위해 각 측정 단위에 대해 하나씩 두 개의 라디오 버튼을 추가했습니다.

                    <input
                        type="radio"
                        name="units"
                        checked={unit === "imperial"}
                        value="imperial"
                        onChange={(e) => setUnit(e.target.value)}
                        />
                    Fahrenheit
                </label>
                <label>
                    <input
                        type="radio"
                        name="units"
                        checked={unit === "metric"}
                        value="metric"
                        onChange={(e) => setUnit(e.target.value)}
                        />
                    Celcius
                </label>

그래서, 당신이 물을 수도 있는 이것은 무엇입니까setUnit. 아래에서 볼 수 있듯이 초기 값을 'imperial'로 설정하여 내 상태에 추가했습니다. 이를 사용하여 사용자가 선택한 값을 가져온 다음 해당 측정 단위를 표시할 수 있습니다.

이제 도시 이름을 입력하고 원하는 측정 단위의 라디오 버튼을 선택하면 아래와 같은 내용이 표시됩니다.



우리는 거기에 갈! 날씨 앱을 더욱 역동적으로 만들겠다는 목표를 달성했습니다. 다음주에는 스타일링을 추가할 예정이니 그때 만나요!