[REACT] SPA 와 async

SPA ( Single Page Application )

• 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션을 뜻한다.

 

🎣 기존 웹 페이지

에서는 사용자가 다른 페이지로 이동할 때 마다 새로운 HTML을 받아오고 페이지를 로딩할 때 마다 서버에서 리소스를 전달 받아서 해석한 뒤 화면에 보여줬다.

따라서 서버가 할 일이 많았기 때문에, 성능상의 문제가 발생할 수 있었다. 서버 트래픽이 많이 나올 수도 있고 많은 사용자가 몰리면 과부하가 걸려서 서버가 다운 되는 등의 문제가 발생 가능했다. 캐싱과 압축을 통해 어느 정도 보완할 수 있지만 요즘 처럼 사용자와의 인터랙션이 많은 페이지의 경우 이 방법 또한 힘들어진다.

또한 화면 전환이 필요할 때마다 새로운 HTML을 불러오기 때문에 바뀔 필요가 없는 부분까지 새로 받아와 로딩하므로 매우 비효율적이다.

이를 보완할 수 있는 것이 SPA이다.

 

🎣 SPA의 단점

Single Page라는 이름과 맞게 규모가 커지면 javascript 파일이 너무 커진다. 페이지를 로딩할 때 사용자가 방문하지 않을 페이지도 같이 렌더링하기 때문에 로딩시간이 길다는 점이다. 하지만 이 단점은 Code Splitting을 통해 해결할 수 있다.

참고: https://velog.io/@apro_xo/SPA

 

 

SEO ( Search Engine Optimization )

• 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다.

 

🍓 Axios

import { useState } from 'react'
import axios from 'axios' // eslint-disable-next-line

const Axios = () => {
  const [data, setData] = useState(null)
📌  const onClick = () => {
    axios
     .get('https://jsonplaceholder.typicode.com/todos/1') 
     .then((response) => {
      setData(response.data)
      }).error(() => )
  } // 비동기 함수에서 에러가 날때 .then 뒤에 .error 함수 적어주기 📌
 
  return (
    <div>
      <div>
        <button onClick={onClick}>불러오기</button>
      </div>
      {data && (
        <textarea
          rows={7}
          value={JSON.stringify(data, null, 2)}
          readOnly={true}
        />
      )}
    </div>
  )
}

export default Axios

 

🍓 async

import { useState } from 'react'
import axios from 'axios' // eslint-disable-next-line

const Axios = () => {
  const [data, setData] = useState(null)

📌  const onClick = async () => {
    try {
      const response = await axios.get(
        'https://jsonplaceholder.typicode.com/todos/1',
      )
      setData(response.data)
    } catch (e) {
      console.log(e)
    } // async에서는 try, catch를 이용해 try에서 에러가 나면 catch에서 알려줌
  } 📌

  return (
    <div>
      <div>
        <button onClick={onClick}>불러오기</button>
      </div>
      {data && (
        <textarea
          rows={7}
          value={JSON.stringify(data, null, 2)}
          readOnly={true}
        />
      )}
    </div>
  )
}

export default Axios