๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“ฑ Cross Platform/React Native

[React Native] RTK-Query ํŒŒ๋ผ๋ฏธํ„ฐ์— ๋งž๊ฒŒ ํŠน์ • ๋ฐ์ดํ„ฐ๋งŒ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ(Get specific data by parameter using RTK-query)

by Fomagran ๐Ÿ’ป 2022. 8. 12.
728x90
๋ฐ˜์‘ํ˜•

 

์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค.

 

์˜ค๋Š˜์€ RTK-Query์—์„œ ํŒŒ๋ผ๋ฏธํ„ฐ์— ๋งž๊ฒŒ ์›ํ•˜๋Š” ํŠน์ • ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

 

๋งŽ์€ ์‚ฝ์งˆ์„ ํ•˜๊ณ  ๊ฒฐ๊ตญ ํ•ด๊ฒฐ๋ฒ•์„ ์•Œ์•„๋‚ด๊ฒŒ ๋˜์–ด ๊ธ€๋กœ ์ •๋ฆฌํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

 

๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~


1. ์ฒซ ๋ฒˆ์งธ ์‹œ๋„

 

์šฐ์„  ์ œ๊ฐ€ ํ•˜๋ ค ํ–ˆ๋˜๊ฑด ์œ ์ €๋ฅผ ์ด๋ฆ„์œผ๋กœ ์กฐํšŒํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ด์—ˆ๋Š”๋ฐ์š”.

 

์•„๋ž˜์™€ ๊ฐ™์ด ์ฟผ๋ฆฌ๋ฅผ ํ†ตํ•ด์„œ ์—”๋“œํฌ์ธํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

 

export const userAPISlice = createApi({
  reducerPath: 'userAPI',
  baseQuery: fetchBaseQuery({baseUrl: 'http://192.168.111.34:3001/api'}),
  endpoints: builder => ({
    ...
    getUserByName: builder.query<User, String>({
      query: (name: string) => `/user/${name}`,
    }),
    ...

 

๊ทธ๋ฆฌ๊ณ  ์ด์™€ ๊ฐ™์ด ํŠน์ • ์ด๋ฆ„๊ณผ ํ•จ๊ป˜ ์š”์ฒญํ•˜์—ฌ ์œ ์ €๊ฐ€ ์žˆ๋Š”์ง€ ์—†๋Š”์ง€ ์ฒดํฌํ•˜๊ณ , ์žˆ๋‹ค๋ฉด ์œ ์ € ์ •๋ณด๋ฅผ ๊ฐ€์ ธ์˜ค๋ ค๊ณ  ํ–ˆ์—ˆ๋Š”๋ฐ์š”.

 

 const {data:user} = useGetUserByNameQuery('์ด๋ฆ„')

 

 

Login ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ํ˜„์žฌ inputText์— ์ ํ˜€ ์žˆ๋Š” ์ด๋ฆ„์„ ์ฒดํฌํ•ด์•ผ ํ–ˆ๋Š”๋ฐ์š”.

 

๊ทธ๊ฒƒ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ตฌํ˜„ํ•ด ์ค˜์•ผ ํ–ˆ์ฃ .

 

  const handleLogin = (name:string) => {
    const {data:user} = useGetUserByNameQuery(name)
    ...

 

ํ•˜์ง€๋งŒ ์œ„์™€ ๊ฐ™์ด ๊ตฌํ˜„ํ–ˆ์„ ๊ฒฝ์šฐ invalid hook call ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 


2. ๋‘ ๋ฒˆ์งธ ์‹œ๋„

 

๊ทธ๋ž˜์„œ ๋‘ ๋ฒˆ์งธ๋กœ ์‹œ๋„ํ•œ ๋ฐฉ๋ฒ•์€ ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ์ด๋ฆ„์„ ์ €์žฅํ•  confirmName state๋ฅผ ๋งŒ๋“ค์–ด ์คฌ์Šต๋‹ˆ๋‹ค.

 

์ฟผ๋ฆฌ์˜ ํŒŒ๋ผ๋ฏธํ„ฐ์— ํ•ด๋‹น confirmName์„ ๋„ฃ์–ด์คฌ์Šต๋‹ˆ๋‹ค.

 

 const [confirmName, setConfirmName] = useState<string>('');
 const {data: user} = useGetUserByNameQuery(confirmName);

 

ํ•˜์ง€๋งŒ ์•„๋ž˜์™€ ๊ฐ™์ด confirmName์„ ์ •ํ•ด์ฃผ๊ณ  ๋กœ๊ทธ๋ฅผ ์ถœ๋ ฅํ•˜๋ฉด ๋ฐ”๋กœ ์„ธํŒ…ํ•ด์ค€ ์ด๋ฆ„์ด ์•„๋‹ˆ๋ผ ๋ฐ”๋กœ ๊ทธ ์ „ ๊ฐ’์ด ๋‚˜์™”์Šต๋‹ˆ๋‹ค.

 

  const handleLogin = (name:string) => {
    setConfirmName(name)
    console.log(confirmName);
    ...

 

๋ฐ”๋กœ ๋ฐ”๋€ ๊ฐ’์„ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด์„  useEffect๋ฅผ ์ด์šฉํ•ด์„œ ํ™•์ธํ•œ ๋’ค ๋กœ์ง์„ ์ž‘์„ฑํ•ด ์ฃผ๋ฉด ๋˜์—ˆ์ง€๋งŒ, ์ด ๋˜ํ•œ ๋งŽ์€ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

 

  useEffect(() => {
    console.log(confirmName);
  }, [confirmName]);

3. ์„ธ ๋ฒˆ์งธ ์‹œ๋„

 

๊ฒฐ๊ตญ ์„ธ ๋ฒˆ์งธ ์‹œ๋„ ๋์— ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ƒˆ๋Š”๋ฐ์š”.

 

๋ฐ”๋กœ userAPISlice๋ฅผ ์ฟผ๋ฆฌ๋กœ ๋ฐ›์•„์˜ค๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ mutation์„ ํ†ตํ•˜์—ฌ ์š”์ฒญ์„ ํ•œ ๋’ค transformResponse ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

 

export const userAPISlice = createApi({
  reducerPath: 'userAPI',
  baseQuery: fetchBaseQuery({baseUrl: 'http://192.168.111.34:3001/api'}),
  endpoints: builder => ({
	...
    getUserByName: builder.mutation({
      query: (name: string) => ({
        url: `/username/${name}`,
        method: 'GET',
      }),
      transformResponse: (response: User) => {
        return response;
      },
    }),
    ...

 

mutation์„ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค.

 

import {useGetUserByNameMutation} from '../api/UserAPISlice';

const [login] = useGetUserByNameMutation();

 

๊ทธ ๋‹ค์Œ ์•„๋ž˜์™€ ๊ฐ™์ด login(์›ํ•˜๋Š” ์ด๋ฆ„)์„ .unwrap() ๋ฉ”์„œ๋“œ๋กœ ๋ฐ›์•„์˜ค๋ฉด ์œ ์ €์˜ ์ •๋ณด๊ฐ€ ๋ฐ›์•„์™€ ์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

  const handleLogin = async () => {
    try {
      const user = await login(inputText).unwrap();
      ...
    } catch (err) {
      console.log(err);
    }
  };
728x90
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€