5월 11일 react 수업들 day04-05

728x90

day04 Todos~ Todo로 된 모든 파일들!

day05 Test01~04

Test 01)

//1번 인터넷 사이트 가서 많은양의 데이터를 다 가지고 들고 오고 싶으면, 딱 한번만 가능

useEffect(() => {

fetch('https://jsonplaceholder.typicode.com/posts')

.then(res => res.json()) //응답을 받으면 json형태로 받겠다는 것

.then(res => setData(res))

}, [])

부연 설명 :

이 코드는 fetch 함수를 사용하여 JSONPlaceholder API에서 데이터를 가져오고 setData 함수를 사용하여 해당 데이터를 상태로 설정합니다.

useEffect 훅은 마운트 시 한 번만 실행됩니다.

fetch 함수를 사용하여 데이터를 가져옵니다. fetch 함수는 Promise를 반환하며, 응답을 JSON 형식으로 변환합니다.

그런 다음 setData 함수를 사용하여 데이터를 컴포넌트의 상태로 설정합니다.

이 코드에서 두 번째 매개 변수로 전달된 빈 배열은 종속성 배열입니다.

이 배열은 useEffect 훅이 다시 실행되는 조건을 결정합니다.

이 경우 빈 배열이므로 useEffect는 컴포넌트가 마운트될 때만 한 번 실행됩니다.

따라서 이 코드는 컴포넌트가 마운트될 때 JSONPlaceholder API에서 데이터를 가져와 상태로 설정합니다.

//2번

useEffect(() => {

axios.get('https://jsonplaceholder.typicode.com/posts')

.then(res => setData(res.data))

}, [])

useEffect 훅은 마운트 시 한 번만 실행됩니다. axios.get 함수를 사용하여 데이터를 가져옵니다. axios.get 함수는 Promise를 반환하며, 응답 데이터는 res.data 속성에 저장됩니다. 그런 다음 setData 함수를 사용하여 데이터를 컴포넌트의 상태로 설정합니다.

useEffect의 두 번째 매개 변수로 전달된 빈 배열은 종속성 배열입니다. 이 배열은 useEffect 훅이 다시 실행되는 조건을 결정합니다. 이 경우 빈 배열이므로 useEffect는 컴포넌트가 마운트될 때만 한 번 실행됩니다. 따라서 이 코드는 컴포넌트가 마운트될 때 Axios를 사용하여 JSONPlaceholder API에서 데이터를 가져와 상태로 설정합니다.

//3번 async 비동기 통신 => 요청을 하면 응답이 올 때까지 기다리지 않는다

useEffect(() => {

const getData = async() => {

const res = await fetch('https://jsonplaceholder.typicode.com/posts')

const data = await res.json()

setData(data)

}

getData()

}, [])

이 코드는 useEffect 훅을 사용하여 JSONPlaceholder API에서 데이터를 가져와 컴포넌트의 상태로 설정합니다. fetch 함수를 사용하여 데이터를 가져옵니다. 가져온 데이터는 json() 메소드를 사용하여 JSON 형식으로 변환합니다.

이 코드에서 useEffect 훅은 콜백 함수와 종속성 배열 두 개의 인수를 사용합니다. 콜백 함수는 getData 함수입니다. 이 함수는 async 키워드를 사용하여 비동기 함수로 정의되며 fetch() 함수를 사용하여 JSONPlaceholder API에서 데이터를 가져옵니다. 가져온 데이터는 json() 메소드를 사용하여 JSON 형식으로 변환하고, 상태를 설정하는 setData 함수를 사용하여 컴포넌트 상태로 설정합니다.

useEffect의 두 번째 인수는 빈 배열 []입니다. 이렇게하면 효과가 종속성이없으며 컴포넌트가 마운트 될 때만 실행되어야 함을 React에 알려줍니다. 이것은 효과가 자주 변경되는 변수에 의존하는 경우 해당 변수가 변경 될 때마다 다시 실행되어 성능 문제를 일으킬 수 있기 때문에 중요합니다.

전반적으로, 이 코드는 fetch() 함수를 사용하여 JSONPlaceholder API에서 데이터를 가져와 컴포넌트 상태로 설정합니다. useEffect 훅은 컴포넌트가 마운트될 때 한 번 실행되며, getData 함수를 사용하여 데이터를 가져와 상태로 설정합니다.

4번

useEffect(() => {

const getData = async() => {

const res = await axios.get('https://jsonplaceholder.typicode.com/posts')

setData(res.data)

}

getData()

}, [])

추가 부연 설명:

이것은 JSONPlaceholder API에서 데이터를 가져 오는 React 함수형 컴포넌트입니다. useEffect 훅은 함수형 컴포넌트에서 부작용 (예 : 데이터 가져 오기)을 관리하는 데 사용됩니다.

이 코드에서 useEffect 훅은 콜백 함수와 종속성 배열 두 개의 인수를 사용합니다. 콜백 함수는 Axios 라이브러리를 사용하여 JSONPlaceholder API에서 데이터를 가져 오는 async 함수입니다. 데이터를 검색 한 후에는 setData 함수를 사용하여 상태로 설정합니다. 이 함수는 아마도 useState 훅일 것입니다.

전반적으로이 코드는 Axios를 사용하여 JSONPlaceholder API에서 데이터를 가져 오고 컴포넌트가 마운트 될 때 상태로 설정합니다.

비동기 통신 - ajax
서버에 새로고침 없이 요청할 수 있게 도와준다.
서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 도와준다.

1. jQuery - $.ajax()
2. js - fetch()
        fetch() -> json 형식으로 가져온다.
3. 설치 - axios
          axios.get() -> object 형식으로 가져온다.

- 외부 API 비동기 통신을 위해서 fetch()를 이용한다.
- fetch()에 API 경로를 적어주면 promise가 반환된다.
fetch( url, [options] )

fetch(url)
.then(콜백) - 응답 성공
.catch(콜백) - 응답 실패

axios.get(url)
     .then(콜백) - 응답 성공
     .catch(콜백) - 응답 실패

npm install axios / yarn add axios

여러가지 데이터를 가져올 수 있는 방법 중

728x90

INDUSTRY BABY

5월 11일 react 수업들 day04-05

티스토리툴바