api 다루기[자신감up 실습10] + 리팩토링

영상의 api와는 다른 날씨 api를 사용해서 렌더링했다.

지난 시간의 api키를 재활용하여, 이번 영상 속에서는 axios 대신, fetch를 사용한다.

fetch대로 출력방식을 이 api의 데이터 구조에 맞게끔 스스로 수정하여 출력했다.

---

 

코드

function WeatherAPI() {

  const [city, setCity] = useState("");

  const [weatherData, setWeatherData] = useState("");

  const [error, setError] = useState("");

  const hInputchange = (e) => {

    setCity(e.target.value);

  };

 

const fetchWeatherData = async () => {

    try {

      const response = await fetch(url);

 

 <h1>날씨 앱</h1>

      <input

        type="text"

        placeholder="도시입력"

        value={city}

        onChange={hInputchange}

      />

      <button onClick={fetchWeatherData}>날씨 정보 확인</button>

      {weatherData && (

        <>

          <div className="city">{weatherData.name}</div>

          <div className="temperature">

            {Math.round((weatherData.main.temp - 273.15) * 10) / 10}도

          </div>

          <div className="sky">{weatherData.weather[0].main}</div>

        </>

---

리팩토링

1. 값을  e.target.value가 아닌, useRef로 받아오기

2.  Enter key로 명령 전송시키기(윗 코드는 마우스로 버튼을 눌러야만 전송됨)

---

form 태그로 감싼 후, 데이터 전송요청 함수를 onSubmit 으로 관리.

ref={}로 태그를 참조하게끔 만든다. 

 <form onSubmit={fetchWeatherData}>

        <input

          type="text"

          placeholder="도시입력"

          value={city}

          onChange={hInputchange}

          ref={ref}

        />

        <button type="submit">날씨 정보 확인</button>

      </form>

 

---

추가 한 뒤, useState 함수를 event에서 참조형식의 값을 출력하도록 수정.

 const ref = useRef();

  const hInputchange = () => {

    setCity(ref.current.value);

  };

 

이대로 마무리하면 될 줄 알았는데 입력후 전송요청을 해도 안된다?

 

 

-> 아래처럼 e.preventDefault()사용

const fetchWeatherData = async (e) => {

    e.preventDefault();

    try {

      const response = await fetch(url);

 

 

event.preventDefault()를 호출하는 이유는 HTML 폼의 기본 동작을 방지하기 위함입니다.

 

기본적으로, form 태그의 onSubmit 이벤트가 발생하면 페이지가 새로고침되거나 다른 페이지로 이동하는 것이 일반적인 동작입니다. 이를 방지하기 위해 event.preventDefault()를 사용하여 폼의 기본 동작을 중단합니다.

fetch와 같은 동적 데이터 통신은 새로고침에 의해 직접적으로 막히지 않지만, 페이지가 새로고침되면 현재 진행 중인 fetch 요청이 중단될 수 있습니다. 따라서 동적 웹 애플리케이션에서는 폼 제출 시 새로고침을 방지하여 fetch 요청이 원활하게 완료될 수 있도록 하는 것이 일반적입니다.