React-query / Fetching Data

λ°•λ‹€μ˜Β·2023λ…„ 1μ›” 5일
0

React

λͺ©λ‘ 보기
23/28

πŸ”— Fetching Data κΈ°λ³Έ pattern


1. import data fetching Hook

import { useQuery } from 'react-query';

2. Hook 뢈러였기

unique key (super-heroes) 와 promise(return axios.get) λ₯Ό λ¦¬ν„΄ν•˜λŠ” ν•¨μˆ˜λ₯Ό 인자둜 λ°›λŠ”λ‹€.
ex) ν•¨μˆ˜λŠ” json server λ‘œλΆ€ν„° get request λ₯Ό ν•œλ‹€.

const results = useQuery('super-heroes', () => {
  return axios.get('http://localhost:5000/superheroes');
});

3. query hook 을 ν†΅ν•΄μ„œ λ¦¬ν„΄λœ API response 인 query results λ₯Ό μ‚¬μš©ν•œλ‹€.

results λŠ” ν˜„μž¬ query μ—μ„œ λ‚΄κ°€ ν•„μš”λ‘œν•œ λͺ¨λ“  것이 λ‹΄κ²¨μžˆλ‹€.


4. results μ•ˆμ—μ„œ λ‚΄κ°€ ν•„μš”ν•œ μš”μ†Œλ§Œ destructuring ν•œλ‹€.

result => { isLoading, data }

const results = useQuery('super-heroes', () => {
    return axios.get('http://localhost:5000/superheroes');
  });

const { isLoading, data } = useQuery('super-heroes', () => {
    return axios.get('http://localhost:5000/superheroes');
  });

5. 뢈러온 값듀을 ν™œμš©ν•΄μ„œ jsx λ Œλ”λ§ ν•˜κΈ°

optional chaining 으둜 data κ°€ 없어도 μ—λŸ¬κ°€ λ‚˜μ§€ μ•Šκ²Œν•˜κΈ°

return (
  <>
    <h2>React Query Super Heroes Page</h2>
    {data?.data.map((hero) => {
      return <div key={hero.name}>{hero.name}</div>;
    })}
  </>
);

6. react query 의 일반적인 pattern

useQuery 의 λ‘λ²ˆμ§Έ μΈμžμ— inline 으둜 data fetching ν•¨μˆ˜λ₯Ό 넣지 μ•Šκ³  λ°–μ—μ„œ μ„ μ–Έν•˜λŠ” 것(fetchSuperHeroes)이 react query 의 일반적인 pattern

const fetchSuperHeroes = () => {
  return axios.get('http://localhost:5000/superheroes');
};

const { isLoading, data } = useQuery('super-heroes', fetchSuperHeroes);

7. 뢀가적인 option 을 인자둜 λ„£μ–΄μ£Όκ±°λ‚˜, ν•„μš”ν•œ values λ₯Ό 더 destructuring ν•΄μ„œ μ‚¬μš©ν•  μˆ˜λ„ μžˆλ‹€.


8. react query λ₯Ό μ‚¬μš©ν•˜λ©΄ μ½”λ“œκ°€ λͺ…ν™•ν•˜κ³  λ‹¨μˆœν•΄μ§„λ‹€.


πŸ“„ code example

import { useQuery } from 'react-query'; // import data fetching Hook
import axios from 'axios';

export const RQSuperHeroesPage = () => {
  // Hook 뢈러였기 // 1. (unique key) 와 2. (promise λ₯Ό λ¦¬ν„΄ν•˜λŠ” ν•¨μˆ˜)λ₯Ό 인자둜 λ°›λŠ”λ‹€.
  // ex) ν•¨μˆ˜λŠ” json server λ‘œλΆ€ν„° get request λ₯Ό ν•œλ‹€.
  // query hook 을 ν†΅ν•΄μ„œ λ¦¬ν„΄λœ query result λ₯Ό μ‚¬μš©ν•œλ‹€.
  // results λŠ” ν˜„μž¬ query μ—μ„œ λ‚΄κ°€ ν•„μš”λ‘œν•œ λͺ¨λ“  것이 λ‹΄κ²¨μžˆλ‹€.
  // results μ•ˆμ—μ„œ λ‚΄κ°€ ν•„μš”ν•œ μš”μ†Œλ§Œ destructuring ν•œλ‹€. result => { isLoading, ..}
  // useQuery 의 λ‘λ²ˆμ§Έ μΈμžμ— inline 으둜 data fetching ν•¨μˆ˜λ₯Ό 넣지 μ•Šκ³ 
  // λ°–μ—μ„œ μ„ μ–Έν•˜λŠ” 것(fetchSuperHeroes)이 react query 의 일반적인 pattern
  const fetchSuperHeroes = () => {
    return axios.get('http://localhost:5000/superheroes');
  };

  const { isLoading, data } = useQuery('super-heroes', fetchSuperHeroes);

  // 뢈러온 값듀을 ν™œμš©ν•΄μ„œ jsx λ Œλ”λ§ ν•˜κΈ°
  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  // optional chaining "?" ν™œμš©ν•΄μ„œ data κ°€ 없더라도 μ—λŸ¬κ°€ λ‚˜μ§€ μ•Šκ²Œ μ²˜λ¦¬ν•œλ‹€.
  return (
    <>
      <h2>React Query Super Heroes Page</h2>
      {data?.data.map((hero) => {
        return <div key={hero.name}>{hero.name}</div>;
      })}
    </>
  );
};

React Query Tutorial μ°Έκ³ ν•˜λ©° κ³΅λΆ€ν•œ λ‚΄μš©μž…λ‹ˆλ‹€.

profile
개발과 λ””μžμΈ λ‘λ§ˆλ¦¬ 토끼λ₯Ό!

0개의 λŒ“κΈ€