[React 05] - query, routing, try-catch

yiwoojungยท2022๋…„ 7์›” 1์ผ
0

{C} Codecamp FE 06

๋ชฉ๋ก ๋ณด๊ธฐ
5/21

๐Ÿ—ฟ ์˜ค๋Š˜์˜ ๋ชฉํ‘œ

  1. Apollo-Client / Query
  2. Routing
  3. try - catch


1. Apollo-Client / Query

Apollo-client์—์„œ query๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋ ค๋ฉด useQuery Hook์„ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.
useQuery๋Š” useMutation๊ณผ๋Š” ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์€ ๋น„์Šทํ•˜์ง€๋งŒ ๋‹ค๋ฅธ์ ์ด ์žˆ๋‹ค.
useMutation ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ ์‹คํ–‰์ด ๋˜์ง€๋งŒ useQuery๋Š” ํŽ˜์ด์ง€๊ฐ€ ์—ด๋ฆฌ์ž๋งˆ์ž ๋ฐ”๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด๊ฒŒ ๋œ๋‹ค.
variables ๋Š” ์‹คํ–‰ํ•˜๋Š” ์œ„์น˜์— ๋„ฃ์–ด์ฃผ์–ด์•ผ ํ•˜๋ฏ€๋กœ useQuery๋ฅผ ๋ถˆ๋Ÿฌ์˜ค์ž๋งˆ์ž variables ๋ฅผ ์ ์–ด์ค€๋‹ค.


๋ถ„๋ช… ์œ„์˜ data ๊ฐ’์€ ์ฝ˜์†”์— ์ฐํžˆ๋Š”๋ฐ ์™œ ์ด๋Ÿฐ ์—๋Ÿฌ๊ฐ€ ๋‚˜๋Š” ๊ฒƒ์ผ๊นŒ?

์ผ๋‹จ ํŽ˜์ด์ง€๊ฐ€ ๋ Œ๋”๋ง์ด ๋˜๋ฉด ์š”์ฒญ์ด ๋‚ ์•„๊ฐ„๋‹ค. ์š”์ฒญ์ด ๋‚ ์•„๊ฐ„ ์ƒํƒœ์—์„œ๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ์•„๋ฌด๊ฒƒ๋„ ์—†์–ด์„œ ๋น„์–ด์žˆ๋Š” undefined ์ƒํƒœ์ด๋‹ค. ์ด๋•Œ data๊ฐ€ ์–ธ์ œ ์˜ค๋Š”์ง€๋„ ๋ชจ๋ฅด๊ณ  ์˜ค๋Š”๋™์•ˆ์€ ํ™”๋ฉด์ด ๋„ˆ๋ฌด ์˜ค๋žซ๋™์•ˆ ๋นˆ ํ™”๋ฉด์œผ๋กœ ์žˆ์„ ์ˆ˜๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— await ๋“ฑ์€ ์“ธ ์ˆ˜ ์—†๋‹ค. ๊ทธ๋ž˜์„œ ๊ทธ ์‚ฌ์ด์— fetchBoard๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†๋‹ค๋Š” ์—๋Ÿฌ๋ฅผ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋•Œ ์˜ต์…”๋„์ฒด์ด๋‹์„ ์‚ฌ์šฉํ•ด์ฃผ๋ฉด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋œ๋‹ค.

data?.fetchBoard


2. Routing

ํŽ˜์ด์ง€ ์ด๋™์„ ๋งํ•œ๋‹ค.

const router = useRouter()

router.push('์ด๋™ํ• ํŽ˜์ด์ง€')
router.replace()
router.pathname

์ข…๋ฅ˜๋Š” ์ •์ ๋ผ์šฐํŒ…๊ณผ ๋™์ ๋ผ์šฐํŒ… ๋‘๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.

์ •์ ๋ผ์šฐํŒ… Static Routing

์ •์ ๋ผ์šฐํŒ…์€ ์ผ๋ฐ˜์ ์ธ ํŽ˜์ด์ง€ ์ด๋™์ด๋‹ค.
๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ์ •์  ๋ผ์šฐํŒ…์„ ๊ตฌํ˜„ ํ•  ์ˆ˜ ์žˆ๋‹ค.

์—ฌ๊ธฐ์„œ ๋ฒ„ํŠผ๋งˆ๋‹ค ๊ฐ๊ฐ ๋‹ค๋ฅธ ๊ฒŒ์‹œ๊ธ€๋กœ ์ด๋™ํ•˜๊ณ  ์‹ถ์„ ๋•Œ๋Š” ์ฝ”๋“œ๋ฅผ ์–ด๋–ป๊ฒŒ ์ž‘์„ฑํ•˜๋ฉด ๋ ๊นŒ?

์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•ด๋„ ์ด๋™์€ ๋˜๊ฒ ์ง€๋งŒ ๊ฒŒ์‹œ๊ธ€์ด ์ˆ˜์—†์ด ๋งŽ์•„์ง„๋‹ค๊ณ  ํ•œ๋‹ค๋ฉด ๊ตฌํ˜„ํ•˜๊ธฐ ์–ด๋ ค์šธ ๊ฒƒ์ด๋‹ค.

๊ทธ๋ž˜์„œ ๋™์ ๋ผ์šฐํŒ…์ด ํ•„์š”ํ•˜๋‹ค.

๋™์ ๋ผ์šฐํŒ… Dynamic Routing

์šฐ์„  ๊ฒŒ์‹œ๊ธ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋™์ ์œผ๋กœ ๋ฐ›์•„์™€๋ณด์ž.

๊ฒŒ์‹œ๊ธ€์ด ๋‹ด๊ธด ํด๋”๋ช…์€ [aaa] ๋Œ€๊ด„ํ˜ธ๋กœ ๋ฌถ์–ด์ค€๋‹ค.

- aaa๋Š” ํŽ˜์ด์ง€ ๊ฐ€ ์•„๋‹ˆ๋ผ ๋ณ€์ˆ˜๋ฅผ ์˜๋ฏธํ•œ๋‹ค.
- ์–ด๋–ค ๋‚ด์šฉ์ด๋“  ๋‹ค ์ž…๋ ฅ ๊ฐ€๋Šฅํ•˜๋‹ค.
- ๋ณ€์ˆ˜๋ช…์œผ๋กœ fetchBoardํ•˜๋ฉด ๋œ๋‹ค.

ํŽ˜์ด์ง€๋ฅผ ํ•˜๋‚˜๋งŒ ๋งŒ๋“ค๊ณ  ๋‚ด์šฉ์„ ๋™์ ์œผ๋กœ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.


์ฝ˜์†”์— ๋ฐ์ดํ„ฐ๋ฅผ ์ฐ์–ด๋ณด๋ฉด query์— aaa ๊ฐ€ ์ด๋ ‡๊ฒŒ ๋“ค์–ด๊ฐ€ ์žˆ๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ๋ผ์šฐํŒ…๋  ํŽ˜์ด์ง€์˜ ๋‚ด์šฉ์€ router.query.aaa ์ด๋ ‡๊ฒŒ ๋ถˆ๋Ÿฌ์˜ค๋ฉด ๋œ๋‹ค.

๋ผ์šฐํŒ… ํ•  ํŽ˜์ด์ง€ ๋˜ํ•œ ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์„ ์ด์šฉํ•ด ๋™์ ์œผ๋กœ routing ํ•ด์ค˜์•ผ ํ•œ๋‹ค.



3. try - catch

์ด๊ฒŒ ๋ฌด์กฐ๊ฑด ์„ฑ๊ณตํ•˜๋ฉด ์ข‹์€๋ฐ ์‹œ๋„๋ฅผ ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค. ์ด๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด try์™€ catch์ด๋‹ค. ์ด๋•Œ error.message๋กœ error ๋ฉ”์„ธ์ง€๋„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.

์‹œ๋„๋ฅผ ์„ฑ๊ณตํ–ˆ๋“  ์‹คํŒจํ–ˆ๋“  ๋ฌด์กฐ๊ฑด ์‹คํ–‰์‹œํ‚ค๊ณ  ์‹ถ์€ ์ฝ”๋“œ๊ฐ€ ์žˆ์„ ๋•Œ๋Š” catch ๋ฐ‘์— finally๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

0๊ฐœ์˜ ๋Œ“๊ธ€